dongwooklee96 commented 3 years ago

퍼블리싱 강좌를 통해서, 원하는 페이지를 구성하고 화면을 만들 수 있도록 한다.

dongwooklee96 commented 3 years ago

HTML5 핵심 태그 사용법 (텍스트 서식, 문단)

제목 표시하기 : h1 ~ h6

<h1>무의미한 한글 텍스트입니다.</h1>
<h2>무의미한 한글 텍스트입니다.</h2>
<h3>무의미한 한글 텍스트입니다.</h3>
<h4>무의미한 한글 텍스트입니다.</h4>
<h5>무의미한 한글 텍스트입니다.</h5>
<h6>무의미한 한글 텍스트입니다.</h6>

문단, 줄 바꿈 : p, br

<p>
  소금이라 그들은 그들의 심장의 청춘은 가장 것이다. 기관과 실로 눈이 같이, 이상을 이상의 것은 것이다. 온갖 얼마나 오직 고행을 뿐이다. 천고에 너의 청춘에서만 청춘이 고행을 놀이 같은 이상 심장의 이것이다. 주는 것이다.보라, 불어 천고에 사막이다. 이것을 사람은 품에 풀이 하는 뛰노는 충분히 동력은 교향악이다. 이 청춘에서만 그들의 같이 보는 아름다우냐? 위하여, 만물은 현저하게 얼음에 보는 못하다 얼음과 이것이다. 우리의 꽃이 길지 무한한 동산에는 이상은 보라.
</p>

<p>
  날카로우나 무엇을 사람은 수 밝은 피고, 광야에서 듣기만 보라. 창공에 품에 설레는 유소년에게서 봄바람이다. 이상 고동을 시들어 작고 곳이 별과 풍부하게 것이다. 우는 인간에 온갖 없으면 설산에서 용감하고 청춘의 말이다. 내려온 소리다.이것은 뭇 유소년에게서 이것이야말로 피다. 거선의 충분히 인생의 무엇이 이것은 타오르고 이것이야말로 보라. 관현악이며, 못하다 위하여 이상의 발휘하기 위하여 피다. 그들의 구하기 바이며, 맺어, 끝까지 몸이 온갖 하였으며, 뿐이다. 발휘하기 무엇이 두기 피고, 옷을 인생을 미묘한 것이다. 무엇을 그것은 굳세게 두기 아름답고 듣는다.
</p>
<p>
  이것은 전인 사랑의 곳이 운다. 이상, 놀이 동산에는 동력은 어디 말이다. 있을 있으며, 인생에 인간은 소금이라 봄바람이다. 같지 따뜻한 힘차게 것이 천고에 못할 설레는 뜨거운지라, 사막이다. 석가는 하여도 봄바람을 별과 인생의 소리다.이것은 사는가 노래하며 것이다.보라, 아니다. 보배를 커다란 넣는 소리다.이것은 수 방황하였으며, 인생의 이것이다. 위하여서 보내는 내는 아름다우냐? 끝에 방황하여도, 그들의 고동을 쓸쓸하랴? 생의 얼음이 곧 가진 이상의 몸이 청춘의 것이다.
</p>

문단간의 간격을 나타낸다.
p 태그를 사용하면, 문장 간의 간격이 생기게 된다.
일반적으로 본문 내용을 입력할 떄 사용한다.
문단 안에서 줄바꿈을 하고 싶다면, <br/> 태그를 사용하면 된다.

글자 굵게 표시하기: b, strong

<b>날카로우나 무엇을 사람은 수 밝은 피고, 광야에서 듣기만 보라. 창공에 품에 설레는 유소년에게서 봄바람이다. 이상 고동을 시들어 작고 곳이 별과 풍부하게 것이다. 우는 인간에 온갖 없으면 설산에서 용감하고 청춘의 말이다. 내려온 소리다.이것은 뭇 유소년에게서 이것이야말로 피다. 거선의 충분히 인생의 무엇이 이것은 타오르고 이것이야말로 보라. 관현악이며, 못하다 위하여 이상의 발휘하기 위하여 피다. 그들의 구하기 바이며, 맺어, 끝까지 몸이 온갖 하였으며, 뿐이다. 발휘하기 무엇이 두기 피고, 옷을 인생을 미묘한 것이다. 무엇을 그것은 굳세게 두기 아름답고 듣는다.
</b>

글자 기울림 표시하기: em, I

<em>이것은 전인 사랑의 곳이 운다.</em>

글자 및줄 표시하기: u

글자 취소선 표시하기: s, del

큰 글자 표시, 작은 글자 표시: big, small

클 글자 표시 및, 작은 글자 표시: big, small

위 첨자, 아래 첨자: sup, sub

형광색 배경색 글자: mark

수평선 넣기: hr

dongwooklee96 commented 3 years ago

목록 만들기

순서가 있는 목록 : ol > li
순서가 없는 목록 : ul > li

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <ol>
    <li>방콕 쇼핑 리스트</li>
    <li>방콕에서 반드시 들려야 할 베스트</li>
      <ul>
        <li>씨암 (Siam)</li>
        <li>카오산 로드 (Khaosan Road)</li>
      </ul>
    <li>방콕 맛집 리스트</li>
    <li>방콕 관광 리스트</li>
  </ol>
</body>
</html>

dongwooklee96 commented 3 years ago

링크 및 이미지 다루기

외부 링크나 파일 링크하기 : a
이미지 html 문서에 넣기 : img
a, img 태그에는 속성이 있다.
a 태그에는 href 속성이 있고, 특정한 사이트나, 파일로 연결을 시켜준다.
img 태그에는 src 라는 속성이 있고, 이미지 파일이 있는 경로를 적어주면 이미지를 보여주게 된다.
단독으로 사용하기 보다는, a 태그 안에 이미지를 중첩 시켜서 적어주게 된다.

<a href="https://www.naver.com" target="_blank" title="구글 사이트로 이동">
  <img src="img/download.png" height="225" width="225"/>
</a>

a 태그는 현재 창에서 링크된 주소로 연결을 시켜주지만, 새로운 창에서 보여주고 싶다면 target 이라는 속성이 있다.
또한 title이라는 속성을 기입하면, 링크에 마우스를 올렸을 때 툴팁이 나오게 된다.
img에는 alt 속성이 있는데, 이미지를 찾지 못할 때 대체할 텍스트를 나타낸다.

dongwooklee96 commented 3 years ago

CSS를 HTML 문서로 링크하기

HTML 문서 내에 HTML 태그를 선택해서 디자인하고 배치하는 역할을 한다.

CSS를 링크하는 방법

내부 CSS 구문 작성: html 파일의 <head> .. </head> 태그 사이에 <style> ... </style>로 CSS를 시작한다.
외부 CSS 파일을 헤더안에서 <link> 라는 태그로 연결하고 CSS 구문을 작성하기

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

dongwooklee96 commented 3 years ago

Screen Shot 2021-05-26 at 7 56 38 AM

CSS 파일의 순서는 html 파일의 계층 구조 순서대로 만들어주는 것이 좋다.

body {
  background: gray;
}

h1 {
  font-size: 50px;
  color: red;
}

dongwooklee96 commented 3 years ago

CSS 선택자 및 선택자 적용 우선 순위

Screen Shot 2021-05-26 at 8 02 08 AM

태그 선택자

p {
  text-align: center;
  color: red;
}

html에 정해져있는 태그를 대상으로 사용할 수 있다.

클래스 선택자

.center {
  text-align: center;
  color: red;
}

. 으로 시작한다는 것이 특징이다.

아이디 선택자

#center {
  text-align: center;
  color: red;
}

# 으로 시작하는 것이 특징이다.

태그와 함께 쓰는 선택자

p.center {
  text-align: center;
  color: red;
}

p 태그 중에서, center 라는 클래스 속성을 가진 요소를 선택하는 것이다.

dongwooklee96 commented 3 years ago

그룹 선택자

h1 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

h1, p {
  text-align: center;
  color: red;
}

중복된 속성을 여러 태그에 적용하고 싶을 때, 그룹 선택자를 이용하여 묶어서 속성을 적용할 수 있다.
연결 속성자라고도 부른다.

하위 선택자

p span {
  text-align: center;
  red;
}

p 태그 밑에 있는 span을 선택하는 것이다.

전체 선택자

* {
  text-align: center;
  color: yellow;
}

모든 요소에 스타일을 적용하는 것이다.

dongwooklee96 commented 3 years ago

CSS 적용 우선 순위

!Important Style
```
h1 {
color: red !important;
}
```

Inline Style

<h1 style="color: green" class="text">CSS 적용 우선 순위 - 인라인</h1>

ID Selector Style
Class Selector Style
Tag Selector Style

dongwooklee96 commented 3 years ago

CSS가 어렵다고 느끼는 이유

CSS 속성과 값에는 영어 단어 뜻 속에 모두 담겨 있다.
따라서 무조건 외우지 말고, 영어 단어 뜻을 살펴보는 것이 좋다.
```
overflow: hidden;
background-attachment: fixed;
```
내용과 요소가 크기를 벗어났을 때, 감추라는 뜻이다.
스크롤할 때 배경 이미지의 부착여부를 결정하고: 고정이다.

서식 관련 속성

css에 폰트 사이즈를 지정하지 않으면 기본 폰트 크기는 16px이다.
css에는 4가지의 단위가 있다. 16px, 1em, 100%, 12pt
가장 일반적으로 가독성을 생각한 폰트 크기는 15px을 기본으로 한다.

Screen Shot 2021-05-27 at 8 03 51 AM

rem은 반응형 사이트에서 주로 사용한다.
font-weight의 기본 값은 normal이다. 글꼴의 두께를 지정하는 속성이다. 볼드가 기본으로 들어가있는 태그에 두께를 제거하려면, normal으로 속성을 주면 된다.
line-height는 줄간격이다.
font-family는 글꼴을 지정하는 속성이다. 실무에서 굉장히 신경을 많이 써야 한다.
font-style은 문자 스타일을 나타낸다.
color는 글꼴의 색상을 지정하는 특성이다. 다양한 속성으로 값을 넣어줄 수 있다.
text-decoration는 텍스트 줄 표시 및 제거하는 옵션이다.
text-transform은 텍스트를 대문자 및 소문자로 변환하는 속성이다. none, capitalize, uppercase, lowercase
text-align은 문자 정렬 방법을 지정하는 속성이다. 가장 많이 사용하는 속성이다. justify는 양쪽 정렬이다.
text-shadow는 텍스트 그림자 효과를 주는 속성이다.

dongwooklee96 commented 3 years ago

h1~h6는 기본적으로 font-weight 속성이 bold로 되어 있어서 조금은 답답한 느낌이 있어서 일반적으로 font-weight 속성을 normal로 지정한다.
line-height는 px 단위 보다 em 단위로 넣는 것이 좋다. 왜냐하면 폰트 크기가 변경됨에 따라서 줄간격이 상대적으로 변해야하기 때문이다. 그리고 일반적으로 문서 서식을 제어하는body 태그 안에다가 넣고 시작을 한다. 가장 적당한 값은 1.6em이다.
color 속성은 텍스트의 색상을 지정하는 속성이다.

h1 {
  font-weight: normal;
  color: rgba(0, 255, 115, 0.76);
  text-decoration-line: overline;
}

a 링크는 기본적으로 밑줄이 들어가 있다. 따라서 이것을 제거하고 싶다면 text-decoration 속성을 none으로 줄 수 있다.
text-align 속성의 기본 값은 left이다.

dongwooklee96 commented 3 years ago

목록 스타일

Screen Shot 2021-05-27 at 8 25 11 AM

ol.menu {
  list-style: upper-roman;
}

실무에서는 ol을 사용하는 경우는 거의 없고, 대부분 ul을 사용할 것이다.

ul.menu {
  list-style: none;
}

before 가상 클래스로 원하는 아이콘 넣기

.menu li:before {
  content: '*';
}

dongwooklee96 commented 3 years ago

HTML 부모요소 vs 자식 요소, CSS 자손 선택자 VS 자식 선택자

Screen Shot 2021-05-27 at 8 35 06 AM

자식과 자손의 개념은 자식은 바로 밑의 요소만을 의미하고 자손은 자식의 자식까지 포함하는 개념이다.
자손 선택자는 스페이스이다. 자식 선태자는 >이다.

<body>
  <div class="box">
    <div>
      <div>
        <div>

        </div>
      </div>
    </div>
  </div>
</body>

.box {
  border: 1px solid red;
  width: 400px;
  height: 400px;
}

.box > div {
  border: 1px solid red;
  width: 200px;
  height: 200px;
  padding: 20px;
}

.box > div > div {
  width: 50px;
  height: 50px;
  background-color: red;
  padding: 20px;
}

dongwooklee96 commented 3 years ago

상세 디자인을 위한 CSS 박스 모델

Screen Shot 2021-05-27 at 8 47 46 AM

HTML은 무조건 네모 모양일 수 밖에 없다.
border-style은 테두리의 스타일을 지정한다.
border-width 테두리의 두께를 지정한다.
border-color 테두리 색상을 지정한다.

한 번에, 여러 테두리에 속성을 할당 할 수 있다.

border 2px solid blue;

Screen Shot 2021-05-27 at 8 56 02 AM

border-bottom: none; 속성을 주면 밑의 테두리를 제거할 수 있다.

Screen Shot 2021-05-27 at 8 57 06 AM

Screen Shot 2021-05-27 at 8 58 10 AM

border-radius 엘리먼트 코너를 둥글게 하기
값의 개수에 따라서, 적용되는 범위가 다르게 적용된다.
값을 4개 넣을 때는 (좌상-> 우상 -> 우하 -> 좌하) 순서로 적용된다고 생각을 하면 된다. 상의하자라고 기억을 하면 쉽다!

Screen Shot 2021-05-27 at 9 05 47 AM

.box1 { border-radius: 20px }
.box2 { border-radius: 50px }
.box3 { border-radius: 100% }
.box4 { border-radius: 50px 0px 50px 0px}
.box5 { border-radius: 200px 0px 0px 0px}
.box6 { border-radius: 200px 200px 200px 0px }
.box7 { border-radius: 200px 0px 200px 0px}
.box8 { border-radius: 200px 200px 0px 0px}

dongwooklee96 commented 3 years ago

상세 디자인을 위한 박스 모델

Screen Shot 2021-05-28 at 8 09 58 AM

width, height, padding, margin에 대해서 이해하지 못하면 아무것도 할 수 없다. -margin, padding 속성의 크기를 지정할 때, 숫자를 하나만 사용하는 경우에는 상, 우, 하, 좌에 모두 값이 적용된다.
두 개의 숫자를 사용하는 경우에는, 앞의 숫자는 상, 하 그리고 뒤의 숫자는 좌, 우를 의미한다.
4가지 숫자를 모두 사용할 경우에는 상, 우, 하, 좌 순서로 적용된다. ex) margin: 10px 20px 30px 40px;
padding은 콘텐츠와 보더 사이의 공간을 의미하고, margin은 보더 밖의 공간을 의미한다.

.box {
  border: 1px solid red;
  width: 400px;
  height: 400px;
  margin: 100px;
  padding: 100px;
}

박스 모델 (box-sizing)

.box {
  border: 1px solid red;
  width: 600px;
}

.box div {
  border: 1px solid orange;
  width: 200px;
  height: 200px;
  float: left;
  box-sizing: border-box;

box-sizing: border-box 대한 개념은 너무 중요하다. 이 개념이 없으면 레이아웃을 만들기 힘들다.
box-sizing: border-box의 의미 : 처음에 설정한 width, height에다가, 패딩과 보더가 늘어나더라도 최초에 적용한 너비와 높이 이상 증가하는 것을 제한하는 것이다.

dongwooklee96 commented 3 years ago

그림자 속성

Screen Shot 2021-05-28 at 8 34 36 AM

box-shadow : 박스에 그림자 효과를 적용하는 것이다.
text-shadow : 텍스트에 그림자 효과를 적용하는 것이다.

div {
  background-color: #ccc;
  width: 250px;
  height: 200px;
  margin: 5px;
  border-radius: 5px;
  float: left;
}

.box1 {
  /*x, y, blur, color*/
  box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.34);
}

.box2 {
  /*x, y, blur, color*/
  box-shadow: 0px 0px 20px rgba(24, 76, 229, 0.34);
}

.box3 {
  /*x, y, blur, color*/
  box-shadow: 10px 10px crimson;
}

.box4 {
  /*x, y, blur, color*/
  box-shadow: inset 0px 0px rgba(186, 10, 10, 0.34);
}

텍스트 SHADOW

body {
  background-color: #000000;
}
.heading {
  font-size: 70px;
  text-transform: uppercase;
  color: gold;
  text-shadow: 5px 5px 20px black;
}

dongwooklee96 commented 3 years ago

인라인 요소, 블록 요소, 인라인 블록

Screen Shot 2021-05-28 at 8 49 05 AM

인라인 요소는 한줄에 여러개를 배치할 수 있는 것들이다, 그리고 기본 너비 값은 컨텐츠의 너비 값이고 크기 값 및 상하 마진을 가질 수 없다는 특징이 있다.
블록요소는 한줄에 한개만 배치할 수 있다. 대체적으로 레이아웃을 잡는 요소들이 블록 요소이다. 기본 너비값은 100%이며, 크기 값을 가질 수 있고, 상하 마진을 가질 수 있다.
인라인 블록 요소는 인라인 요소의 특징과 블록 요소의 특정을 같이 사용하는 것이다. img, input, button, fontawesome를 많이 사용한다.
한줄에 여러개를 배치할 수 있으며 기본 너비값은 컨텐츠의 너비 값이다. 그리고 상하 마진을 가질 수 있다.

display 속성

display 속성에 주로 사용하는 값 : block, inline-block, inline, none, flex
각 특성을 알고 인라인 블록, 인라인, 블록 요소를 적절하게 사용해야한다.

dongwooklee96 commented 3 years ago

CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)

Screen Shot 2021-05-31 at 8 01 21 AM

HTML 요소를 수평으로 정렬할 때 사용하는 대표적인 속성이다.
float 속성은 부모요소 기준으로 왼쪽 또는 오론쪽에 배치할지를 지정한다. 인라인, 블록 요소 상관없이 모두 적용된다.
중앙에 배치하고 싶다면, margin: auto;를 사용하면 된다. 인라인 요소는 적용이 되지 않는다는 특징이 있다.
따라서 부모 요소에 text-align: center;을 이용하여, 정렬을 해줘야 한다.
기본 float 속성은 none으로 적용된다.
자식 요소에 float 속성이 사용되면 부모 요소는 자식 요소가 없다고 판단하여 높이 값을 잃는다.
따라서 부모 요소에 overflow: hidden을 사용하면 높이 값을 자동으로 찾아준다.

Screen Shot 2021-05-31 at 8 09 46 AM

.parent {
  border: 5px solid red;
  width: 600px;
  overflow: hidden;
}

.child {
  background-color: gold;
  width: 200px;
  height: 200px;
  float: left;
}

CSS 포지셔닝 (속성 : clear)

Screen Shot 2021-05-31 at 8 17 07 AM

clear: left | right | both
일반적으로 both를 많이 사용한다.

CSS로 HTML 요소 가로 배치하기 (float, overflow, box-sizing, inline-block)

Screen Shot 2021-05-31 at 8 24 37 AM

float와 overlfow를 사용하여 배치하는 방법이 있다.
- 단 1px도 틀리면 안된다. 따라서 box-sizing: border-box; 라는 속성을 사용해야 한다.
display: inline-block으로 배치하는 방법이 있다.
- 위의 속성을 사용하고 부모 요소에 text-align: center 속성을 사용한다.
상황에 따라서 올바른 방법을 적용하면 된다.

dongwooklee96 commented 3 years ago

레이아웃을 설계하는 시멘티 태그 사용법

Screen Shot 2021-05-31 at 8 33 47 AM

레이아웃을 만들줄 알아야 자신감이 생긴다.
레이아웃을 만들고, 셀렉터를 만들고 시작을 한다.
공통적인 것은 자식 선택자로 속성을 적용하고, 개별적인 속성은 클래스별로 따로 작성한다.
공통적인 것과 개별적인 것을 구분 할 줄 아는 능력이 중요하다

sada-dream / sada-dream_server_v2

HTML+CSS+JQUERY 포트폴리오 실전 퍼블리싱 - 섹션 1 [HTML+CSS+JQUERY 퍼블리싱 필수 이론] 학습하기 #20

HTML5 핵심 태그 사용법 (텍스트 서식, 문단)

제목 표시하기 : h1 ~ h6

문단, 줄 바꿈 : p, br

글자 굵게 표시하기: b, strong

글자 기울림 표시하기: em, I

글자 및줄 표시하기: u

글자 취소선 표시하기: s, del

큰 글자 표시, 작은 글자 표시: big, small

클 글자 표시 및, 작은 글자 표시: big, small

위 첨자, 아래 첨자: sup, sub

형광색 배경색 글자: mark

수평선 넣기: hr

목록 만들기

링크 및 이미지 다루기

CSS를 HTML 문서로 링크하기

CSS를 링크하는 방법

CSS 파일의 순서는 html 파일의 계층 구조 순서대로 만들어주는 것이 좋다.

CSS 선택자 및 선택자 적용 우선 순위

태그 선택자

클래스 선택자

아이디 선택자

태그와 함께 쓰는 선택자

그룹 선택자

하위 선택자

전체 선택자

CSS 적용 우선 순위

CSS가 어렵다고 느끼는 이유

서식 관련 속성

목록 스타일

before 가상 클래스로 원하는 아이콘 넣기

HTML 부모요소 vs 자식 요소, CSS 자손 선택자 VS 자식 선택자

상세 디자인을 위한 CSS 박스 모델

상세 디자인을 위한 박스 모델

박스 모델 (box-sizing)

그림자 속성

텍스트 SHADOW

인라인 요소, 블록 요소, 인라인 블록

display 속성

CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)

CSS 포지셔닝 (속성 : clear)

CSS로 HTML 요소 가로 배치하기 (float, overflow, box-sizing, inline-block)

레이아웃을 설계하는 시멘티 태그 사용법