Karice의 여행 & 코딩 블로그

1.Display

display 속성

요소의 렌더링 박스 유형을 결정하는 속성입니다.

    기본 값 : - (요소마다 다름)

display: value;

< 속성 값 >

• 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재

• inline level 요소 사이의 공백과 개행 처리 inline 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들입니다. 따라서 inline와 inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가지게 됩니다.

display와 box model의 관계

inline 요소의 padding/border 속성이 좌/우 만 적용 된다고 표시한 이유 추가 설명

실제로 inline 요소의 padding/border는 좌/우뿐만 아니라 상/하에도 적용이 됩니다. 

parent 는 <div>, child 는 <span>하지만 상/하 padding/border는 line-box에는 영향을 주지 못하기 때문에 위와 같이 부모 요소의 박스에 반영되지 않습니다.

parent 는 <div>, child 는 <span>

2.Visibility

 visibility 속성

요소의 화면 표시 여부를 지정하는 속성입니다.

    기본 값 : visible 

visibility: visible | hidden | collapse | initial | inherit;

< 속성 값 >

visibility: visible; /* 보임 기본값 */ visibility: hidden; /* 숨김, 자신의 박스 영역은 유지(margin까지 모두 포함) */ visibility: collapse; /* 셀간의 경계를 무시하고 숨김(박스영역 없음, 테이블의 행과 열 요소에만 지정 가능, 그 외 요소 지정은 hidden과 같음) */

display: none과 차이점

• display: none: 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
• visibility: hidden: 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)

3.Float

float 속성

요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성입니다.

    기본 값 : none

float: none | left | right | initial | inherit;

< 속성 값 >

4.Clear

clear 속성

요소를 floating 된 요소의 영향에서 벗어나게 하는 속성입니다.

     기본 값 : none

clear: none | left | right | both | initial | inherit;

< 속성 값 >

• block-level 요소만 적용 가능

5.Position

position 속성

요소의 위치를 정하는 방법을 지정하는 속성입니다.

기본 값 : static

position: static | absolute | fixed | relative | sticky | initial | inherit;

< 속성 값 >

• Normal-flow  란? 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)를 뜻합니다. 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것을 말합니다.

offset(top/left/bottom/right)

top|bottom|left|right: auto|length|initial|inherit;top: 50%; left: 10px; bottom: -10px; right: auto;

• offset의 %단위 사용 이전에 padding과 margin에서 % 값을 적용할 때, 상하좌우 방향에 관계없이  가로 사이즈를 기준으로 %값을 계산된다고 배웠습니다. 그러나 offset은 top, bottom (상하) 는 기준이 되는 요소의 height 값 left, right (좌우) 는 width값에 대하여 계산되어집니다.

6.Z- index

z-index 속성

기본 값 : auto

요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다.

z-index: auto | number | initial | inherit;

< 속성 값 >

z-index: 1;​

• position 값이 static이 아닌 경우 지정가능
• 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
• 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
• 큰 값이 가장 위쪽(음수 사용 가능)

vertical-align 인라인 요소의 수직 정렬, text-align 인라인 요소의 수평 정렬

vertical-align 속성

요소의 수직 정렬을 지정하는 속성입니다. 

    기본 값 : baseline

vertical-align: keyword | length | percent | initial | inherit ;

< 속성 값 >

vertical-align은 기본 값이 baseline입니다.

이전에 타이포그래피 구조 강의에서 설명했듯이 baseline은 소문자 x를 기준으로 하단 라인을 의미합니다. 

• keyword 
• sub : 부모 아래 첨자 기준으로 정렬
• super : 부모 위 첨자 기준으로 정렬
• text-top : 부모 텍스트의 맨 위(Ascender 제외) 
• text-bottom : 부모의 텍스트의 맨 아래(Descender 제외)
• middle : 부모의 중앙에 위치
• top : 부모의 맨 위 위치
• bottom : 부모의 맨 아래 위치
  
  
• length px값 사용 시 baseline을 기준으로 이동하며, 음수 값도 사용 가능합니다.
  
  
• percent ( % ) line-height를 기준으로 내에서 이동하며 음수 값 사용 가능합니다.

text-align 속성

텍스트의 정렬을 지정하는 속성입니다. 

    기본 값 : left (Right to Left 언어일 경우는 right)

text-align: left | right | center | justify | initial | inherit ;

기본 값은 left이지만 경우에 따라 다릅니다.

문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고,

RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 됩니다. 

< 속성 값 >

text-align과 display의 관계

 -  text-align은 inline-level에 적용

 -  text-align은 block-level에 적용할 수 없음 

그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까요?

박스모델 챕터에서 다룬 margin의 auto 값을 이용해서 하시면 됩니다. 

• 가운데 정렬 
• 인라인 요소 : text-align (center)
• 블럭 요소 :  margin (auto) 

요소의 레벨에 따라 정렬하는 방식의 차이를 바로 알고 있으시기 바랍니다.

text-indent 속성

텍스트의 들여쓰기를 지정하는 속성입니다. 

    기본 값 : 0

text-indent: length | initial | inherit;

< 속성 값 >

• length 문단의 첫 줄에 대한 들여쓰기를 수행합니다. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동합니다.
  
  
• percent ( % ) 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기합니다.

text-decoration 속성

텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값입니다. 

    기본 값 :  none   currentColor   solid

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

• text-decoration-line 텍스트 꾸밈의 종류를 지정하는 속성입니다.    
• 기본 값 : none  

< 속성 값 >

• text-decoration-color
• 텍스트 꾸밈의 색상을 지정하는 속성입니다.    
• 기본 값 : currentColor
• 색상 값을 사용하여 원하는 색상을 지정할 수 있습니다.
• text-decoration-style 꾸밈에 사용되는 선의 스타일을 지정하는 속성입니다.    
• 기본 값 : solid  
  

< 속성 값 >

white-space 속성

요소 안에 공백을 어떻게 처리할지 지정하는 속성입니다.

    기본 값 : normal

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;

< 속성 값 >

letter-spacing 속성

자간을 지정하는 속성입니다.

    기본 값 : normal

letter-spacing: normal | length | initial | inherit;

< 속성 값 >

word-spacing 속성

단어 사이의 간격을 지정하는 속성입니다.

   기본 값 : normal

word-spacing: normal|length|initial|inherit;

< 속성 값 >

word-break 속성

단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성입니다.

    기본 값 : normal

word-break: normal | break-all | keep-all | initial | inherit;

< 속성 값 >

word-wrap 속성

요소를 벗어난 단어의 줄바꿈을 지정하는 속성입니다.

  기본 값 : normal

word-wrap: normal|break-word|initial|inherit;

< 속성 값 >

1.타이포 그래피

폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 합니다.

모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다.

•em 폰트의 전체 높이를 의미합니다.
•ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미합니다.
•Baseline 소문자 x를 기준으로 하단의 라인을 의미합니다.
•Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y )
•Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l )

2. Font

font-family 속성

글꼴을 지정하는 속성입니다.

font-family: family-name | generic-family ( | initial | inherit );

• family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다.  이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다.
  
  
• generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙입니다. 예를 들면 아래와 같이 선언하여 사용할 수 있습니다. 

font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;

가장 먼저 Helvetica를 사용하고, 이를 사용할 수 없을 때 Dotum을 사용하는 방식으로 우선순위에 따라 차례대로 적용 됩니다. 만약 "abc 가나다 123" 이라는 글자가 있다면, "abc"와 "123"은 Helvetica로 표현이 되고, "가나다"는 Dotum으로 표현이 됩니다.
"가나다"가 Dotum으로 표현된 이유는 Helvetica는 한글을 지원하는 폰트가 아니기 때문입니다.

line-height 속성

행간을 제어할 때 사용하는 속성이라 해서 줄 간격으로 생각해 오해하기 쉬울 수가 있습니다.

줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만,

line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미합니다. 

< 속성 값 >

주의할 점은, line-height의 값으로 number를 선언할 때와 %로 선언할 때의 차이입니다.

두 값 모두 font-size를 기준으로 동작하기 때문에 1이나 100%를 같은 것이라고 오해할 수 있습니다.

하지만 두 값은 큰 차이가 있습니다. 바로 line-height의 값이 자식 요소로 상속되었을 때의 계산 방식입니다. 

• number 부모 요소의 숫자 값이 그대로 상속됩니다. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가집니다.
  
  
• % 부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속됩니다.
  
  

아래 코드를 예시로 보자면,

body { font-size: 20px; line-height: 2; } /* line-height = 40px; */ body { font-size: 20px; line-height: 200%; } /* line-height = 40px; */

두 경우 모두 <body>에 똑같이 line-height: 40px이 적용됩니다.

하지만 자식 요소로 <p>가 있다고 생각을 하면 얘기가 달라집니다.

body { font-size: 20px; line-height: 2; } /* line-height = 40px; */ p { font-size: 10px; } /* line-height = 20px; */ body { font-size: 20px; line-height: 200%; } /* line-height = 40px; */ p { font-size: 10px; } /* line-height = 40px; */

이처럼 계산된 값이 아닌 숫자 값을 상속한다는 사실 때문에,

숫자 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로,

가능하면 단위가 없는 값을 사용하는 것이 좋습니다.

font-size 속성

글꼴의 크기를 지정하는 속성입니다.

    기본 값 : medium

font-size: keyword | length | initial | inherit ;

 < 속성 값 >

• absolute size (keyword) 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의되어있습니다.
• relative size (keyword) 부모 요소의 font-size 크기에 대해 상대적입니다. smaller는 0.8배, larger는 1.2배입니다.
• length px, em, rem 등의 단위를 이용하여 고정된 크기를 지정할 수 있습니다. - em :  부모 요소의 font-size에 em 값을 곱한 크기 - rem : 루트의 font-size에 rem 값을 곱한 크기
• percent (%) 부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정할 수 있습니다.
• viewport units vw, vh 단위로 뷰포트를 기준으로 하여, 유동적인 font-size를 지정할 수 있습니다. vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가집니다.

font-weight 속성

글꼴의 굵기를 지정하는 속성입니다.

    기본 값 : normal

font-weight: normal | bold | bolder | lighter | number | initial | inherit ;

< 속성 값 >

실무에서는 normal과  bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양하는 편입니다.

물론 상속 관계에서 바뀌어야 하는 스펙이라면 당연히 유용하게 사용될 수 있지만, 그 외의 경우에는 사용에 있어 신중해야 합니다. 

font-weight는 normal, bold와 같은 키워드 외에 숫자로도 그 굵기를 표현할 수 있습니다.

100~900까지 100단위로 값을 지정하여 사용할 수 있고 숫자가 커질수록 더욱 굵게 표현됩니다.

기본적으로 400은 normal과 같고, 700은 bold와 같습니다

그러나 수치를 이용한 font-weight는 폰트 자체에서 지원을 해야 표현할 수 있습니다.

폰트에 따라 font-weight를 적용해도 굵기에 변화가 없을 수도 있으며,

normal과 bold만 지원하는 폰트일 경우에는 100~500까지는 normal로, 600~900까지는 bold로 표현됩니다.

폰트가 점차 다양해지면서 굵기 자체를 폰트 family-name으로 가지고 있는 경우도 있습니다.

또한,  디바이스별로 조금 다르게 표현될 수도 있습니다. 

font-weight와 font-family, font-size는 서로 밀접하게 연관되어있습니다.

font-style 속성

글꼴의 스타일을 지정하는 속성입니다.

    기본 값 : normal

font-style: normal | italic | oblique | initial | inherit;

< 속성 값 >

font-variant 속성

글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있습니다.

    기본 값 : normal 

font-variant: normal | small-caps | initial | inherit ;

 < 속성 값 >

font 관련 속성

font-style, font-variant, font-weight, font-size/line-height, font-family 속성들을 한 번에 선언할 수 있는 축약형 속성입니다. 

    기본 값 : 각 속성들의 기본 값

font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;

< 속성 값 >

축약형을 선언할 때는 아래 사항들을 유의해야 합니다.

• font-size와 font-family는 반드시 선언해야 하는 필수 속성입니다.
• 빠진 속성이 있다면 기본 값으로 지정됩니다.
• 각 속성의 선언 순서를 지켜야 합니다.

but 잘안씀. 조건이 너무 많아서

@font-face

웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성입니다. 

    기본 값 : 없음

@font-face { font-properties }

< 속성 값 >

사용 예시는 다음과 같습니다.

@font-face { font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */ src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */ font-weight: bold; /* 필요에 따라 지정 */ font-style: italic; /* 필요에 따라 지정 */ } body { font-family: webNanumGothic; }

@font-face { 
font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */ 
src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */ 
font-weight: bold; /* 필요에 따라 지정 */ 
font-style: italic; /* 필요에 따라 지정 */ } 
body { font-family: webNanumGothic; }

웹폰트는 선언 시 필요에 따라 굵기나 스타일 등을 같이 지정해서 사용할 수 있습니다

1.길이

절대 길이

절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다.

• px ( 1px = 1/96th of 1 inch )

절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다.
여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서,
디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다.

• pt ( 1pt - 1/72 of 1 inch )

컴퓨터가 없던 시절부터 있던 단위입니다. 
인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다. 
웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있습니다.
그러나 사용하는 기기의 해상도에 따라 차이가 있어 W3C에서도 pt는 웹개발 시 권장하는 단위가 아닙니다.
예를 들면 Windows에서는 9pt = 12px, Mac에서는 9pt = 9px 로 보이게 됩니다.

상대 길이

상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변합니다.

• %

        부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다.

• em

        font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.

• rem

        root의 font-size를 기준으로 값을 환산합니다.

• vw

        viewport의 width값을 기준으로 1%의 값으로 계산됩니다.

2.색깔

    <h1 style="color: red"> heading </h1>
    <h1 style="color: #ff0000"> heading </h1>
    <h1 style="color: #f00"> heading </h1>
    <h1 style="color: rgb(255,0,0)"> heading </h1>    
    <h1 style="color: rgba(255,0,0, 0.5)"> heading </h1>

3.배경

• background-color

      기본 값 : transparent

배경의 색상을 지정하는 속성입니다.
앞선 색상 강의에서 배운 색상 값 적용 방식과 같습니다.

• background-image

      기본 값 :  none

배경으로 사용할 이미지의 경로를 지정하는 속성입니다.
url의 경로는 절대 경로, 상대 경로 모두 사용 가능합니다.
만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면,
그 부분에 background-color 색상이 노출됩니다.

• background- repeat
  
  기본 값 : repeat

이미지의 반복 여부와 방향을 지정하는 속성입니다.
기본값이 repeat이기 때문에 따로 설정하지 않으면 x, y축으로 반복되어서 표시됩니다.
background-repeat의 값으로 사용할 수 있는 것들은 다음과 같습니다.

< 속성 값 >

• background-position 기본 값 : 0%  0% 요소에서 배경 이미지의 위치를 지정하는 속성입니다.  x축, y축으로부터의 위치를 지정할 수 있으며, 값의 선언 순서는 x축, y축으로부터의 간격입니다. 만일 한쪽만 지정된다면 나머지는 중앙 값(center)으로 적용됩니다.

< 속성 값 >

• background-attachment 기본 값 : scroll 화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성입니다.

< 속성 값 >

4.박스모델1

     Content 영역

       요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비 및 높이를 나타냅니다.

• Border 영역
  
  content 영역을 감싸는 테두리 선을 border라고 합니다.
• Padding 영역
  
  content 영역과 테두리 사이의 여백을 padding이라고 합니다.
  content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미칩니다.
  이에 따라 padding을 content의 연장으로 볼 수도 있습니다.

• Margin 영역
  
  border 바깥쪽의 영역을 margin이라고 합니다.
  border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역입니다.
  즉, 주변 요소와의 여백(간격)을 margin을 이용해 지정할 수 있습니다.

5.border 속성

border-width

기본 값 : medium 선의 굵기를 지정하는 속성입니다. border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수 있습니다.

border-style 기본 값 :  none 선의 모양을 지정하는 속성입니다. border-top-style, border-bottom-style, border-right-style, border-left-style을 이용하여 상하좌우 선의 모양을 다르게 표현할 수 있습니다.

**

6. Padding

padding: [-top] [-right] [-bottom] [-left];

0 10px 20px 30px /* 상, 우, 하, 좌 다름 */

0 10px 20px /* 좌, 우 같음 */

0 10px /* 상, 하 같음 & 좌, 우 같음 */

0 /* 상, 우, 하, 좌 모두 같음 *

7.Margin

• margin auto 기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가집니다. 이를 활용하여 수평 중앙 정렬을 할 수 있습니다. 아래 코드를 살펴봅시다.

*margin과 padding의 비교

• 음수값 사용 가능 여부! 왜 margin은 음수 값 적용이 가능하고, padding은 적용되지 않을까요? 예를 들어 생각해보자면, padding은 뼈와 우리 피부 사이의 지방이라고 생각하고, margin은 사람과 사람 사이의 간격이라고 생각하면 쉽습니다. 지방은 아무리 뺀다고 해서 피부가 뼈보다 밑으로 갈 수 없을 뿐만 아니라, 0 이하가 될 수 없으므로 양수만 된다고 생각하면 됩니다. 그러나 사람과 사람 사이는 멀리 떨어질 수도 있지만, 서로 겹쳐서 서 있을 수도 있으므로 음수 값이 가능하다고 생각하면 됩니다.
• %값의 사용과 기준점 css 속성을 사용하면서 어떤 값을 적용할 때 이 단위를 적용 할 수 있을까? 라는 생각을 가지고 코딩하는 자세는 매우 중요합니다. margin과 padding은 px과 같은 고정적인 단위 외에도 %라는 상대적인 단위를 사용 할 수 있습니다. %는 요소의 크기를 기준으로 상대적인 값을 결정짓게 됩니다. 얼핏 생각하면, 상하는 height 값에 대해 좌우는 width 값에 대해 크기가 계산될 거 같지만 그렇지 않습니다. %는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정 됩니다.

div { width: 100px; height: 200px; margin: 10%; padding: 10%; }

만약 위와 같은 코드의 경우에는 margin과 padding이 모두 20px 10px 20px 10px으로 적용되는 것이 아니라,  10px 10px 10px 10px 값으로 적용됩니다.

8.Width && Height

width 속성

      기본 값 : 0

< 속성 값 >

width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면,

그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. (content, padding, border) 

예를 들어,

<div class="box"> box </div>
 
.box {
  width: 100px;
  padding: 20px;
  border: 10px solid black;
}

위와 같이 선언되어있다면 요소의 총 가로 크기는 160px가 됩니다.

분명 width: 100px를 적용했는데 어떻게 160px가 된 걸까요?

앞선 설명에서 언급한 바와 같이 width는 padding, border 영역에 대해서 영향을 받기 때문입니다.

1.CSS 적용

1. Inline

Inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법입니다.

해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 됩니다.

Inline 스타일 방식이라고 부릅니다.

<div style="color:red;"> 내용 </div>

<div style="color:red;"> 내용 </div>

Inline 스타일 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지 않습니다.

2. Internal

Internal은 문서에 <style>을 활용한 방법입니다.

<style>은 <head>내부에 들어가며 <style>안에 스타일 규칙이 들어갑니다.

<style> div {color: red;} </style>

<style> div {color: red;} </style>

위의 코드로 모든 <div>에 같은 스타일을 줄 수 있습니다.

하지만 이것도 한계가 있습니다.

많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 합니다.

페이지가 많고 스타일 규칙 내용이 많아지면 결코 쉬운 일은 아닙니다.

3. External

External은 외부 스타일 시트 파일을 이용한 방법입니다.

외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식입니다.

외부 파일은 확장자가 .css가 되며 css 파일이라고 부릅니다.

div {color: red;}

div {color: red;}

우선 CSS 파일을 하나 만들고 스타일 규칙을 선언합니다.

그다음 <link>을 이용해서 CSS 파일을 연결하면 됩니다.

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/style.css">

<head> 내부에 <link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 적습니다.

rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야 합니다.

외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있습니다.

또한, 수정이 필요할 때도 CSS 파일을 수정하면 연결된 모든 페이지에 반영할 수 있습니다.

외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법입니다.

4. Import

Import는 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식입니다.

@import url("css/style.css");

@import url("css/style.css");

<style> 내부 상단이나 외부 스타일 시트 파일 상단에 선언하는데 성능상 좋지 않아서 거의 쓰이지 않습니다.

이에 본 강의에서는 다루지 않습니다. 궁금하신 분들은 따로 찾아보시길 바랍니다.

2.그룹화

* { color: yellow; }

* { color: yellow; }

h1, h2, h3, h4, h5, h6 { color: yellow; }

3.선택자

-CLASS

<dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>


//CSS

.html { color: purple; }
.css { text-decoration: underline; }

다중선택자
.foo { font-size: 30px; }
.bar { color: blue; }

<p class="foo bar"> ... </p>

-ID

<p id="bar"> ... </p>

#bar { background-color: yellow; }

class 선택자와의 차이점

1. .기호가 아닌 #기호 사용
2. 태그의 class 속성이 아닌 id 속성을 참조
3. 문서 내에 유일한 요소에 사용
4. 구체성 

가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 점입니다.

클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있었습니다.

4.선택자2

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }


//정확한 속성값 지칭
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

//
[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
//

5.자손, 부모 선택자

//자손 선택자
div span { color: red; }

//자식 선택자
div > h1 { color: red; }

//인접 형제 선택자
div + p { color: red; }

6. 가상클래스(특정한 조건을 만족해야 선택함)

/*
:first-child : 첫 번째 자식 요소 선택
:last-child : 마지막 자식 요소 선택
*/

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

li:first-child { color: red; }
li:last-child { color: blue; }



/*
:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미
*/

a:link { color: blue; }
a:visited { color: gray; }

/*
:focus: 현재 입력 초점을 가진 요소에 적용
:hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용
*/

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

7. 구체성

important

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖습니다.

important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다.

p#page { color: red !important; }

8.상속

상속된 CSS는 구체성을 가지지 못하기 때문에 구체성을 가진 전체 선택자의 스타일이 적용이된다

* { color: red; }
h1#page { color: gray; }

<h1 id="page">Hello, <em>CSS</em></h1>

//이러면 em에는 gray가 들어감

박스 모델 관련 속성들은 상속되지 않는다. ex)margin, padding,background,border...

1.시멘틱 마크업

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

위 코드를 작성해서 화면을 보면 각각의 요소가 같은 모습으로 표현되나 그 의미가 같지는 않습니다.

<b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지닙니다.

<strong>은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것입니다.

따라서 중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용하는 것이 적절하고 시멘틱한 마크업입니다.

이외에 <i>는 단순히 기울어진 글자를 표현하지만, <em>은 글자의 특정 부분을 강조하는 의미를 지닙니다.

<u>와 <s>는 단순히 글자에 선을 그은 것이고, <ins>와 <del>은 내용이 새롭게 추가되거나

삭제가 되었다는 의미를 지닙니다.

2.추가 태그

• <article> : 본문의 주 내용이 들어가는 공간을 의미
• <aside> : 내부에 위치하는 내용이 외에 사이드에 손재하는 내용을 의미
• <figcaption> : <figure> 태그의 캡션(설명)을 정의한다.
• <figure> : 그림이나 도표, 사진과 같은 독립적인 콘텐츠들을 명시
• <footer> : 문서, 구역의 바닥 글을 정의
• <header> : 소개 내용이나, 목록과 같은 링크들의 묶음을 표시
• <main> : 문서의 주요 내용을 지정할 대 사용한다. 단, 고유한 내용만을 지정할 수 있고 반복되는 내용을 포함해서는 안된다.
• <mark> : 텍스트의 일부를 강조
• <nav> : 문서 네의 링크들의 집합, 내비게이션을 의미
• <section> : 문서의 구역을 정의
• <time> : 특정 시간이나 날자를 정의

• <article> : 내용을 내부에서 구분하여 정의 내림 
• <aside> : 주요 내용과 간접적으로만 연관된 부분 표현, 사이드바 혹은 콜아웃 박스로 주로 표현 
• <figcaption> : <figure> 내 콘텐츠에 대한 설명/범례
• <figure> : 독립적인 콘텐츠를 표현
• <footer> : 꼬릿말(구획의 작성자, 저작권 정보, 관련 문서)
• <header> : 머릿말(소개 및 탐색을 위한 제목(h1~2) 시멘틱 마크업)
• <main> : 본문,  주요 콘텐츠
• <mark> : 현재 맥락에 관련이 깊거나 중요한 부분 하이라이트
• <nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구문 생성(<li> 활용)
• <section> : 내용을 내부에서 구획화
• <time> : 시간의 특정 지점 또는 구간 표현, datetime 이라는 특성으로 유효한 날짜 구문 마크업 가능

3.block vs inline

block level : 한 줄에 하나의 요소 표시

ex) div,h1~h6, p, ul, li, table 등

inline level : 한 줄에 여러개 요소 표시 가능

ex) span, i, img, em, strong 등

1.테이블

<table>

    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            
<th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
<td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            
<td>February</td>
            <td>$80</td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            
<td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>

</table>
 
 <table>
  <caption>Specification values</caption>
  <thead>
  <tr>
    <th rowspan="2">Grade.</th>
    <th rowspan="2">Point.</th>
    <th colspan="2">Strength.</th>
    <th rowspan="2">Percent.</th>
  </tr>
  <tr>
    <th>kg/mm</th>
    <th>lb/in</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Hard</td>
    <td>0.45</td>
    <td>56.2</td>
    <td>80,000</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Medium</td>
    <td>0.45</td>
    <td>49.2</td>
    <td>70,000</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Soft</td>
    <td>0.45</td>
    <td>42.2</td>
    <td>60,000</td>
    <td>30</td>
  </tr>
  </tbody>
</table>

-colspan : 가로셀 합치기

-rowspan : 세로셀 합치기

2.input요소

<input type="text" placeholder="ㅇㅇㅇ">

<input type="password">

<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자

<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동

<input type="file">

<form action="./test.html">
    메시지: <input type="text" name="message"><br>
    <input type="submit">
    <input type="reset">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="버튼">
</form>

-radio는 name태그가 같아야 서로 상호작용 가능

-checkbox도 name으로 묶어줘야 함. 그래야 값을 받아올 수 있음

-submit은 제출, reset은 초기화

-button 타입은 custom해줘야 함 value로 이름 변경 가능

-image 타입은 이미지 버튼임. alt, src 필수

3.select

<select>
    <option>서울</option>
    <option>경기</option>
    <option selected>강원</option>
    ...
</select>


<textarea rows="5" cols="30" placeholder="안녕">
    ...
</textarea>

<button type="submit|reset|button">ㅇㅇㅇ</button>

-option에 selected 타입을 주면 처음에 선택되어 있음

-input type=button이랑 button태그랑은 다름

4.else form

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>
<fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
</fieldset>

<form action="" method="">
    <fieldset>
        <legend>기본 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
    <fieldset>
        <legend>부가 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
</form>

-fieldset으로 구조화 해줌. 묶어준다고 생각하면 됨

-legend는 구조화한것의 제목 설정

-Form 태그는 action에는 데이터 처리 주소 / method는 get이나 post처럼 어떻게 보낼건지?

5.전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>form</title>
</head>
<body>
	<form action="">
		<h1>Form 관련 요소</h1>
		<fieldset>
			<legend>기본 정보</legend>
			<label for="userid">아이디 : </label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
			<label for="userpw">비밀번호 : </label> <input type="password" id="userpw"><br>
			성별 : <label for="male">남자</label> <input type="radio" name="gender" id="male" checked>, <label for="female">여자</label> <input type="radio" name="gender" id="female"><br>
		</fieldset>
		<fieldset>
			<legend>부가 정보</legend>
			취미 : 영화 감상 <input type="checkbox" name="hobby" checked>, 음악 감상 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby"><br>
			프로필 사진 업로드 : <input type="file"><br>
			사는 지역 : <select>
				<option>서울</option>
				<option>경기</option>
				<option>강원</option>
				<option selected>제주</option>
			</select><br>
			자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea><br>
			<button type="submit">전송</button>
			<button type="reset">취소</button>
		</fieldset>
	</form>
</body>
</html>

4.1 Sytling Page Sections

• ID & Class

-ID는 1번 밖에, Class는 여러번 쓸수 있다.

-ID는 #으로 class는 .으로 불러온다.

• <div>

div는 그냥 html tag들을 묶는 역활이라고 할 수 있다. css를 적용 시키기 위해서

• <span>

span은 중간중간의 문구 같은 것을 css적용시키기 위해서 지정하는 것이다.

• CSS context selectors

ex)

complex ex)

4.2 Introduction to Layout

• Box Model

• Document Flow

• Borders

• Border-radius

• Padding

• Margin

• Dimentions

• *auto margins

• *Top/bottom margin collapse

4.3 Floating Elements

• Float

• Float vs alignment

• clear

• container too short    

• overflow

• multi-column layouts

4.4 Sizing and Positioning

• position

• Alignment vs float vs position

• vertical-align

• space under image : bug

• Details about inline boxes

• Display

• Visibility

• Opacity

• HTML5 Layout

3.1 Basic CSS

• The bad way to style

:이렇게 inline형식으로 하면 매우 안좋다.

• CSS는 어떻게 적용할까?

.css파일을 만들어서 거기에 코드를 적고 link 시키는게 좋다.

• Basic CSS rule syntax

CSS의 기본형식은 이렇게 어떤 tag에 적용시킬지 쓰고 {}안에 property와 value를 넣는다.

*은 모든 element를 뜻한다.

• CSS properties

• Colors

• Fonts

• *Grouping style

• *주석

• *validator

• Text

• Backgrounds

• List-style-type

• Table

• Border-collapse

• *rowspan and colspan

• Column styles : <col>, <colgroup>

col은 각각의 column을 지정해 줄 수 있다.colgroup은 col을 묶는 것이다.

• Don't use tables for layout!!!

중요한 점이다 . 테이블은 절때 레이아웃으로 쓰이면 안된다.!!!!!!!!!!!!!!!!!!!

• New Features

몇몇 개의 더 있는 기능인다. table corner을 둥글게 줄 수 도 있다.

3.3 More Css Syntax

• Body styles

body태그를 지정하고 속성을 주면 모든 body에 적용이 된다.

• Styles that conflict

style이 여러개 줘서 충돌 할 경우 뒤에 쓰여진 code가 적용된다.

• *Embedding style sheets : <style>

html안에서도 inline방법과 다르게 style속성으로 css를 줄수 있다.

• *Inline style

inline 방법은 위에서의 방법과 다르게 각각의 tag에 속성을 줘서 매우 비효율적이다.

• *Content vs. presentation

• Cascading style sheets

Cascading은 css의 중요도로써 중요도가 높은 것이 보통 적용이 됩니다.

• Inheriting styles

• IDs, & ID selectors

ID는 1개 밖에 쓰일수 없다. id는 #으로 불러온다.

• Classes & Class selectors

class는 여러개 쓸 수 있다. .으로 불러온다.

• CSS pseudo-classes

특수한 경우에 css를 주는 경우이다.

2.1 Basic Html

• Hypertext Markup Language

: describes the contect and structure of information on a web page

- Surrounds text content with opening and closing tags("<>")

- Each tag's name is called an element

ex) <element> contents </element>

- Most whitespace is insignificant in HTML

-We will use a newr viersion called HTML5

• Structure of an HTML page

• 기본 Tag 설명

Page title : <title>

홈페이지에 이름을 정해주는 것이다.

Paragraph : <p>(Block)

Headings : <h1> , <h2> , <h3> , <h4> , <h5> , <h6>

1~6까지 숫자가 커지면 글씨크기는 작아진다.

Horzontal rule : <hr>

중간에 줄을 귿는 태그

• 속성 Tag 설명

• Links : <a>

• * Block and inline elements

• Images : <img>

• Line break : <br>

• Phrase elements : <em>, <strong>

• *Nesting tags

• *주석

2.2 More HTML Elements

• Unordered list : <ul>, <li>

ul 안에도 ul을 쓸수 있다!

• Ordered list <ol>

• Definition list : <dl>, <dt>, <dd>

3개 같이써야된다!

• Quotations : <blockquote>

위에의 예제에서는 <p> 가 element가 된다.

• Inline quotations : <q>

위의 질문에는 어떻게 대답해야될까? 

ans) HTML에서는 "를 &quot;으로 나타낼 수 밖에 없다. <q>를 쓴 이유는 CSS랑 같이 쓰려고

• *HTML Character Entities

• *HTML-encoding text

• Deletions and insertions : <del>, <ins>

• Abbreviations : <abbr>

• Computer code : <code>

• Preformatted text : <pre>

• Web Page metadata : <meta>

이 html문서를 설명해주는 것이다. head에 있어야함

• Favorites icon : ("favicon")

홈페이지 이름 옆에 있는 사진이다.

• HTML tables : <table>, <tr>, <td>

• Table headers, captions : <th>, <caption>

2.3 Web Standards

• Validator : 자신의 html코드가 이상이 없는지 확인해주는 사이트 

 :   validator.w3.org

• HTML5으로 오면서 바뀐점

• 이미지 종류 

• 오디오 종류

• 비디오 종류

• video <video>

• youtube <iframe>