5. CSS 이해하기
5-1. CSS란?
▶ Cascading Style Sheet. HTML을 꾸며주는 표현용 언어.
▶ 마크업 언어(HTML)이 몸의 구조(뼈, 근육)라면, CSS는 옷과 신발과 같이 외적으로 꾸며주는 역할! 즉, HTML이 문서의 정보, 구조를 설계한다면, CSS는 문서를 보기 좋게 디자인!
5-2. CSS 문법과 적용
① CSS 구문
(ex) h1 { color: yellow; font-size:2em; }
★ 선택자(selector) - "h1"
★ 속성(property) - "color"
★ 값(value) - "yellow"
★ 선언(declaration) - "color: yellow", "font-size: 2em"
★ 선언부(declaration block) - "{ color: yellow; font-size:2em; }"
★ 규칙(rule set) - "h1 { color: yellow; font-size:2em; }“
※ 개행 O : 선택자와 선언부 사이, 선언과 선언 사이 / 개행 X : 속성이름과 속성값 사이.
② CSS의 속성(Property)과 HTML의 속성(Attribute) -> 둘은 다름!
③ CSS 주석
/* 주석 내용 */
④ CSS의 적용
1) Inline : 해당 요소에 직접 스타일 속성 이용
2) Internal : 문서에 <style> 태그 사용. <style>은 <head> 내부에 포함. 페이지가 많고 스타일 규칙 내용이 많아지면 복잡해짐.
3) External : 외부 스타일 시트 파일 이용! 외부에 스타일 규칙들을 별도로 모아놓은 파일을 만들어 넣는 방식. 이게 CSS 파일! 파일 관리가 편하고 용량이 작아서 주로 사용되는 방법.
(ex) <link rel="stylesheet" href="css/style.css">
: href 속성을 이용해 CSS 파일의 경로를 적고, rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시함.
4) Import : 스타일 시트 내에서 다른 스타일 시트 파일을 불러옴.
5-3. 선택자
① 요소(태그) 선택자 : 선택자 부분에 태그 이름이 들어감. ( h1 { color: yellow; } )
② 그룹화 : 선택자는 쉼표를 이용해 그룹화 가능. (h1, h2, h3, h4, h5, h6 { color: yellow; }, * { color: yellow; }) * 기호는 성능에 좋지 않음.
③ 선택자와 선언이 동시에 그룹화될 수 있음.
④ class 선택자 : 요소에 구애받지 않고 스타일 규칙 적용 가능한 가장 일반적인 방법. class 선택자를 CSS에서 쓸때는 맨 앞에 .를 찍어줘야 함. class 선택자는 꼭 하나의 값만 가질 수 있는 건 X. 공백으로 구분하여 여러개의 class 값을 넣을 수 있음.
⑤ id 선택자 : .말고 #기호를 맨 앞에 써줘야 함.
★ class 선택자와의 차이점
1) .기호가 아닌 #기호 사용
2) 태그의 class 속성이 아닌 id 속성을 참조
3) 문서 내에 유일한 요소에 사용
4) 구체성
가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 것!
클래스 선택자 : 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 가능! (장점)
but, id 속성값은 문서 내에 유일하게 사용이 되어야 함.
결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐!!!
그리고 마지막으로 구체성의 값이 다름!
⑥ 선택자는 종류에 상관없이 여러 가지 선택자들을 조합하여 사용 가능 (요소와 class, 다중 클래스, id와 class 조합)
⑦ 속성 선택자는, []를 이용하여 []안에 속성 이름을 넣거나, []안에 속성 이름과 속성값을 다 넣거나, 부분 속성값으로 선택할 수 있다.
★ 부분 속성값
[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
5-4. 문서 구조 관련 선택자
★ 부모와 자식 : 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소! 그 요소의 부모 요소는 단 하나뿐. 자식 요소는 여러개 O
★ 조상과 자손 : 부모와 자식의 관계를 포함한 확장된 관계. 조상 요소는 그 요소를 포함하는 모든 요소!
★ 형제 : 같은 부모를 가지고 있는 요소들은 서로 형제 관계!
① 자손 선택자 : 선택자 사이에 아무 기호없이 공백으로 구분
② 자식 선택자 : 선택자 사이에 >를 넣는다.
③ 인접 형제 선택자 : 선택자 사이에 +를 넣는다.
※ 요소들이 많이 나열되어 있더라도, 제일 우측에 있는 요소가 실제 선택되는 요소!
5-5. 가상 선택자
① 가상 클래스 선택자 : 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스. 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용할 수 있는 선택자! 클래스 선택자처럼 동작. :기호를 써서 나타냄. 자세한 건 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 에 있음.
② 문서 구조와 관련된 가상 클래스 : :first-child, :last-child
③ 앵커 요소와 관련된 가상 클래스 : :link, :visited
④ 사용자 동작과 관련된 가상 클래스 : :focus, :hover, :active
⑤ 가상 요소 : 가상 클래스와 비슷. 클래스가 아닌 요소라는 점만 다름. 가상 요소는 현재 문서 내에, HTML 코드에 존재하지 않는 구조, 즉 문서에 존재하지 않는 요소에 내용을 추가할 수 있고, 또 스타일도 부여할 수 있음. (예를 들어, 가장 자주 쓰이는 가상 요소는, 요소의 앞이나 뒤에 별도의 내용을 추가하는 것. 이때 추가되는 새 콘텐츠는 HTML 코드에 직접 추가되지 않고 브라우저 화면에만 나타남.) ::기호를 써서 나타내지만 상황에 따라 :기호를 사용하기도 함. 많이 쓰이는 가상 요소는 :before, :after, :first-line, :first-letter. 자세한 건 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
5-6. 구체성
▶ 선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있음. 이걸 ‘구체성’이라고 함!
▶ 선택자를 얼마나 명시적으로, 구체적으로 선언했느냐를 수치화한 것!
▶ 4개의 숫자 값으로 이루어져 있으며, 값을 비교할 때는 좌측에 있는 값부터 비교하고, 좌측 부분의 숫자가 클수록 높은 구체성을 가짐!
구체성은 아래의 규칙대로 계산됨!
0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
전체 선택자는 0, 0, 0, 0을 가진다.
조합자는 구체성에 영향을 주지 않는다. (>, + 등)
※ 인라인 스타일의 구체성 값은 1,0,0,0이고, 규칙들 중 가장 큰 구체성!!
※ important 키워드는 별도의 구체성 값은 없으나 모든 구체성을 무시하고 우선권을 가짐!! 속성값 뒤 한칸 띄고 !와 같이 씀.
5-7. 상속
▶ 부모가 가진 특성을 자식이 물려받는 개념! 어떤 스타일 규칙이 특정 요소말고도 그 자손 요소까지 적용되는 것!
▶ 구체성과 같이, 스타일 규칙들이 문서에 어떻게 적용되는지 이해하기 위한 또다른 중요한 핵심 개념!
▶ 상속 관계를 잘 활용하면 CSS의 생산성 ↑
★ 모든 속성이 다 상속되는 것은 X. (※ margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다!)
★ 상속된 속성은 아무런 구체성을 가지지 X.
5-8. 캐스케이딩 (Cascading : 단계적인)
▶ 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙.
▶ 3가지 규칙 : 중요도와 출처, 구체성, 선언 순서!
★ 모든 스타일은 아래의 규칙에 따라 단계적으로 적용!
1) 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
① 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다.
② 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.
2) 스타일 규칙들을 출처에 따라 분류합니다.
① 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.
3) 스타일 규칙들을 구체성에 따라 분류합니다.
① 구체성이 높은 규칙들이 우선합니다.
4) 스타일 규칙들을 선언 순서에 따라 분류합니다.
① 뒤에 선언된 규칙일수록 우선합니다.
5-9. 선택자 정리
▶ https://www.w3schools.com/cssref/css_selectors.asp
6. CSS - 단위, 배경, 박스모델
6-1. [속성] 정의와 구문
▶ CSS의 속성은 매우 다양하고, 지속해서 업데이트 되고 있음! https://www.w3.org/ 에서 다양한 변화를 빨리 파악하자!
6-2. [속성] 단위
① 절대 길이 : 고정된 크기 단위. px, pt
② 상대 길이 : 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변함. %, em, rem, vw
6-3. [속성] 색상
① 컬러 키워드 사용
② 16진법 #RRGGBB
③ 16진법 #RGB
④ RGB() (rgb(R, G, B). 0~255의 정수로 된 값)
⑤ RGBA() (A는 투명도)
6-4. [속성] background
① background-color : default는 transparent. 배경색깔 지정.
② background-image : default는 none. 배경으로 사용할 이미지의 경로 지정.
③ background-repeat : default는 repeat. 이미지의 반복 여부와 방향 지정. 속성값으로 repeat, repeat-x, repeat-y, no-repeat이 있음.
④ background-position : default는 0% 0%. 요소에서 배경 이미지의 위치를 지정하는 속성. x축, y축으로부터의 위치 지정 가능. 한쪽만 지정되면 나머지는 중앙값으로 적용됨. 속성값으로 %, px, 키워드(top, left, bottom, center)가 있음.
⑤ background-attachment : default는 scroll. 화면 스크롤에 따른 배경 이미지의 움직임 여부 지정하는 속성. 속성값으로 scroll, local, fixed가 있음.
6-5. [속성] boxmodel
★ boxmodel의 구성
① content : 요소의 실제 내용을 포함하는 영역.
② border : content 영역을 감싸는 테두리 선.
③ padding : content 영역과 테두리 사이의 여백! content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미침. 이에 따라 padding을 content의 연장으로 볼 수도 있음.
④ margin : border 바깥쪽의 영역. border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역. 즉, 주변 요소와의 여백(간격)을 margin을 이용해 지정 가능.
6-6. [속성] border
① border-width : 선의 굵기 지정. 상하좌우 선의 굵기를 다르게 표현 가능.
② border-style : 선의 모양 지정.
③ border-color : 선의 색상 지정.
★ 위 속성들은 공백으로 축약하여 사용할 수 있음.
6-7. [속성] padding
① padding- top/right/bottom/left : content 영역의 위쪽/오른쪽/아래쪽/왼쪽 여백을 지정함.
② padding의 4가지 속성을 축약해서 사용 가능! 속성의 순서는 고정됨. 위쪽을 기준으로 시계방향으로! 상하, 좌우 영역의 값이 같으면 하나로 합쳐서 적용 가능.
※ CSS에서는 0값에 대해선 단위 따로 X
6-8. [속성] margin
① margin- top/right/bottom/left : border 영역의 위쪽/오른쪽/아래쪽/왼쪽 여백을 지정함.
② padding과 마찬가지로 축약하여 사용 O, 상하, 좌우에 대해서 값이 같으면 하나로 합하여 사용 O.
③ margin에서는 수치 이외에 사용할 수 있는 'auto' 값이 있음.
★ margin collapse (마진 병합) : 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것. 1) 두 요소가 상하로 인접한 경우, 2) 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소, 3) 내용이 없는 빈 요소의 경우에 발생.
☆ 마진 병합은 수직 방향으로만 이루어짐. 또한, 마진이 반드시 맞닿아야 발생하므로, 2,3번째의 경우에는 패딩과 보더가 없어야함.
6-9. [속성] margin & padding
▶ 두 속성 모두 여백이 필요할 때 적용하는 속성! 그래서 border의 경계가 명확하게 표시되지 않으면 어떤 속성을 쓸지 헷갈릴 수 있음.
★ margin과 padding의 비교
※ %는 요소의 크기를 기준으로 상대적인 값 결정. %는 상하좌우의 방향에 관계없이 모두 요소의 width값을 기준으로 값이 결정됨.
6-10. [속성] width
▶ 요소의 가로 크기를 정의하는데 사용하는 속성. content 영역의 너비 지정. 속성값으로는 auto, length, percent가 있음.
▶ 인라인 레벨 요소를 제외한 모든 요소에 적용됨.
※ 특정한 값을 지정하여 사용하면, 그 크기는 margin 영역을 제외한 모든 영역에 대해 영향을 받음.
6-11. [속성] height
▶ 요소의 세로 크기를 정의하는데 사용하는 속성. content 영역의 높이 지정. 속성값으로는 auto, length, percent가 있음.
※ 특정한 값을 지정하여 사용하면, 그 크기는 margin 영역을 제외한 모든 영역에 대해 영향을 받음.
※ Containing Block, 즉 부모가 명시적인 높이 값을 가지고 있지 않으면, 자식의 높이를 %로 지정해줘도 적용 X.
6-12. [속성] boxmodel 정리
① boxmodel은 content, padding, border, margin의 총 4가지 영역으로 나누어짐.
② content 영역의 너비는 width, 높이는 height을 통해서 제어 가능.
③ width와 height 그리고 padding과 border을 모두 더한 것이 요소의 전체 크기가 된다
④ 다른 요소와의 여백은 margin을 이용하여 줄 수 있으며 음수값 사용 가능.
⑤ margin은 상하 요소 사이의 병합 현상이 일어나고 이때는 큰 값을 기준으로 병합됨.
7. CSS - 폰트, 텍스트
7-1. [속성] typography
▶ 타이포그래피의 구조
★ 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있음.
• em : 폰트의 전체 높이를 의미.
• ex ( = x-height ) : 해당 폰트의 영문 소문자 x의 높이를 의미.
•Baseline : 소문자 x를 기준으로 하단의 라인을 의미.
•Descender : 소문자에서 baseline 아래로 쳐지는 영역을 의미. 서체에 따라 descender의 길이가 다름. ( g, j, p, q, y )
•Ascender : 소문자 x의 상단 라인 위로 넘어가는 영역을 의미. ( b, d, h, l )
7-2. [속성] font-family
▶ 글꼴을 지정하는 속성.
★ 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의.
① family-name : 사용할 폰트의 이름. ,로 구분하여 여러개 선언 가능. 먼저 선언한 순서대로 우선적. 한글일 경우 홑따옴표로 묶기.
② generic-family : family-name으로 지정된 글꼴을 사용할 수 없을 경우, 브라우저가 대체할 수 있는 폰트. 맨 마지막에 선언. 키워드라서 따옴표로 안 묶는 게 원칙.
7-3. [속성] line-height
▶ 텍스트 라인의 높이 조정. 행간을 제어할 때 사용.
※ line-height로 제어되는 부분인 line-box는 [em 박스]+[상하단의 여백]까지를 의미.
※ 가능하면 단위가 없는 값을 사용하는 게 좋음.
7-4. [속성] font-size
▶ 글꼴의 크기 지정.
① absolute size : 기본값인 medium에 대한 상대적인 크기. 브라우저마다 사이즈 다름.
② relative size : 부모 요소의 font-size 크기에 대해 상대적.
③ length : px, em, rem 등의 단위를 이용하여 고정된 크기 지정.
④ percent : 부모 요소의 font-size를 기준으로 백분율 계산된 값 지정.
⑤ viewport units : vw, vh 단위로 뷰포트를 기준으로, 유동적인 font-size 지정.
7-5. [속성] font-weight
▶ 글꼴의 크기 지정.
① normal : 기본값. 400
② bold : 굵게 표현. 700
③ bolder/lighter : 부모 요소 보다 두껍게/얇게 표현
④ number : 숫자가 클수록 더 두껍게 표현 (100단위)
※ font-weight와 font-family, font-size는 서로 밀접하게 연관되어있음.
7-6. [속성] font-style
▶ 글꼴의 스타일 지정.
① normal : 기본값.
② italic : italic 스타일(=기울어짐)로 표현
③ oblique : oblique 스타일로 표현. oblique 텍스트의 기울기에 대한 각도 추가 지정 가능. (-90~90도)
7-7. [속성] font-variant
▶ 글꼴의 형태를 변형하는 속성. 소문자를 (실제 대문자 사이즈보다) 작은 대문자로 변환. 한글에는 적용 X.
① normal : 기본값.
② small-caps : 소문자를 작은 대문자로 변형
7-8. [속성] font
▶ 글꼴 속성의 축약형. 속성마다 선언 순서를 지켜야하고, 반드시 꼭 넣어야하는 속성들이 있는 등 규칙이 많고 가독성이 좋지 않아서 실무에서 선호 ↓
① 속성값 : (선언 순서대로) font-style, font-variant, font-weight, font-size/line-height, font-family
② 축약형 선언시 유의사항 : font-size와 font-family는 반드시 선언해야 하는 필수 속성. 빠진 속성이 있다면 기본 값으로 지정됨. 각 속성의 선언 순서를 지켜야 함.
7-9. [속성] webfont
▶ 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트
★ @font-face : 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성.
★ @font-face의 속성값
① font-family (필수) : 글꼴의 이름을 지정
② src (필수) : 다운로드 받을 글꼴의 경로(URL)
③ font-style (선택) : 글꼴의 스타일 지정, 기본 값은 normal
④ font-weight (선택) : 글꼴의 굵기 지정, 기본 값은 normal
cf) 시스템 폰트 : font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치가 되어 있어 사용할 수 있는 경우. 이미지 폰트 : 특정 글꼴을 사용하는 게 아니라, 글꼴 대신 이미지를 이용해서 표현하는 경우. 엄연히 따지면 이미지폰트는 이미지임.
※ 웹폰트는 선언 시 필요에 따라 굵기나 스타일 등을 같이 지정해서 사용
7-10. [속성] vertical-align
▶ 인라인 요소의 수직 정렬 지정. default는 baseline.
★ 속성 값
① length : px값 사용 시 baseline을 기준으로 이동. 음수 사용 가능
② % : line-height를 기준으로 내에서 이동. 음수 사용 가능.
③ keyword : baseline(기본 값), sub, super, top, text-top, middle, bottom, text-bottom
7-11. [속성] text-align
▶ 인라인 요소의 수평 정렬 지정.
★ 속성 값
→ left, right, center, justify(텍스트를 라인 양쪽 끝으로 붙여서 정렬)
★ text-align과 display의 관계
1) text-align은 inline-level에 적용
2) text-align은 block-level에 적용할 수 없음
cf) 그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게..?
박스모델 챕터에서 다룬 margin의 auto 값을 이용!
→ 가운데 정렬 인라인 요소 : text-align (center) 블럭 요소 : margin (auto)
7-12. [속성] text-indent
▶ 텍스트의 들여쓰기 지정.
★ 속성 값
① length : px, em 등 고정 수치로 지정. 문단 첫줄에 대한 들여쓰기 수행. 음수 사용 가능. 음수 사용하면 왼쪽으로 이동.
② % : 부모 요소(=텍스트를 포함하는 컨테이너 블록)의 width를 기준으로 변환된 백분율 값으로 들여쓰기.
7-13. [속성] text-decoration
▶ 텍스트의 장식을 지정
★ 속성 값
① text-decoration-line : 텍스트 꾸밈의 종류 지정
☆ 속성값 : none, underline, overline(윗줄), line-through(중간을 지나는 줄)
② text-decoration-color : 텍스트 꾸밈의 색상 지정
☆ 기본값은 currentColor. 색상값을 사용하여 원하는 색상 지정.
③ text-decoration-style : 꾸밈에 사용되는 선의 스타일 지정.
☆ 기본값은 solid. 속성값 : solid(한줄), double(이중선), dotted(점선), dashed(파선), wavy(물결)
7-14. [속성] 단어 관련 속성
① white-space : 요소 안에 공백 처리 지정
② letter-spacing : 자간 지정 (음수 허용)
③ word-spacing : 단어 사이의 간격 지정 (음수 허용)
④ word-break : 단어가 라인 끝에 나올 경우 어떻게 처리할지 지정
⑤ word-wrap : 요소를 벗어난 단어의 줄바꿈(개행)을 지정
8. CSS - 레이아웃
8-1. [속성] display
▶ 요소의 렌더링 박스 유형 결정! 모든 요소는 기본적으로 갖고 있는 display 값이 있고, 그 값에 따라 블록레벨, 인라인 레벨 등 렌더링 박스의 유형 결정됨.
▶ display 속성으로 해당 요소의 렌더링 박스 유형 변경 가능. 렌더링 여부도 결정 가능. display 속성을 잘 알아야 요소가 화면에 표현되는 방식을 이해하기 쉬움.
★ 속성값 : none, inline, block, inline-block(=inline level 요소처럼 렌더링(배치)되지만 block level의 성질 가짐.) 이외에도 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재.
8-2. [속성] visibility
▶ 요소의 화면 표시 여부를 지정. default는 visible.
★ 속성 값 : visible, hidden(화면에 표시되지 않으나 공간은 차지함.), collapse(셀 간의 경계를 무시하고 숨김. 테이블 관련 요소에만 적용됨.)
※ display: none = 요소가 렌더링 되지 않음(DOM에 존재하지 않음). 하지만, visibility: hidden = 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)
8-3. [속성] float
▶ 요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성. float 속성은 요소를 보통의 흐름에서 벗어나 독자적인 공간 위에 배치됨. float을 이용하면 주변 요소들과 더욱 자연스럽게 배치될 수 있음.
★ 속성값 : none, left, right
★ 요소를 보통의 흐름에서 벗어나 띄어지게 함. 주변 텍스트나 인라인 요소가 주위를 감쌈.
★ 대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외: inline-table, flex 등)
8-4. [속성] clear
▶ 요소를 floating 된 요소의 영향에서 벗어나게 하는 속성. float과 항상 따라다니는 속성.
★ 속성값 : none(양쪽으로 floating 요소 허용), left(왼쪽, 허용X), right(오른쪽, 허용X), both(양쪽, 허용X)
★ block-level 요소만 적용 가능
8-5. [속성] position
▶ 요소의 위치를 정하는 방법을 지정하는 속성. 요소의 레이아웃을 설정하는 대표적인 속성. (offset : 요소를 이동시키기 위한 좌표 속성. top, bottom은 height값, left, right는 width값에 대해 계산됨.)
★ 속성 값
① static : Normal-flow 에 따라 배치. offset 값 적용 X.
② absolute : 부모 요소의 위치를 기준으로 offset 에 따라 배치된다. 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 됨. Normal-flow에서 벗어남.
③ relative : 자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치됨. 부모의 position 속성에 영향 X. Normal-flow의 흐름에 따름. 주변 요소에 영향을 주지 않으면서 offset 값으로 이동.
④ fixed : 뷰포트(브라우저의 창)를 기준으로 offset 에 따라 배치됨. 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 나타남. 부모의 위치에 영향 X.
8-6. [속성] z-index
▶ 요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성.
★ 속성 값 : auto (쌓임 순서를 부모와 동일하게 설정(기본값)), number (해당 수치로 쌓임 순서를 설정(음수 허용))
※ position 값이 static이 아닌 경우 지정가능
※ 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
※ 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
※ 큰 값이 가장 위쪽(음수 사용 가능)
8-7. HTML/CSS 유효성 검사
▶ HTML/CSS 코드를 작성하고 나면 항상 유효성 테스트를 실시해야 함. 유효성 검사를 통해 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고, 사용성과 접근성, SEO 최적화 개선에도 도움이 됨.
★ 유효성 검사를 할 수 있는 주소 : https://validator.w3.org/
※ HTML/CSS이 익숙하지 않을 때는 반드시 코드 작성 후 항상 유효성 검사하는 습관을 들이기.
9. CSS – 미디어쿼리
9-1. 미디어쿼리 소개
▶ 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것. 반응형 웹사이트 제작에 반드시 필요.
▶ 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공.
▶ 미디어 쿼리로 인해, 웹 사이트를 제작함에 있어 이전의 ‘정적’인 고정 레이아웃 웹사이트 → ‘동적’으로 반응하는 반응형 웹사이트로 패러다임이 새롭게 변화
9-2. 미디어 타입 & 미디어 특성
★ 미디어 쿼리 선언 방법 : @media (=이제부터 미디어 쿼리를 시작한다는 뜻) mediaqueries {style rules} / CSS 파일 내부에 또는 <style> 태그 내부에 사용가능.
★ 미디어 쿼리 구문은 논리적으로 평가됨. (참 : 스타일 규칙 적용, 거짓 : 무시됨.)미디어쿼리구문은 미디어 타입과 미디어 특성으로 이루어짐.
① 미디어 타입 : 우리가 알아야 할 타입은 all, print, screen 정도. 그 중에서도 screen이 거의 대부분.
② 미디어 특성 : 우리가 알아야 할 특성은 width(뷰포트의 너비, 브라우저 창의 너비)와 orientation(미디어가 세로모드(portrait 키워드와 매칭)인지 가로모드(landscape 키워드와 매칭)인지) 정도
9-3. Syntax
★ 미디어 특성은 이름 앞에 min-또는 max- 접두사를 붙일 수 있음. 반응형 웹사이트 제작할 때 보통 접두사 붙임! 그게 더 효율적이고 간결해서!
9-4. viewport의 이해
▶ 뷰포트(viewport) : 스마트폰을 사용하여 웹을 이용하는 사용자의 빈도가 급격히 높아지면서, 모바일 브라우저에서 만드는 가상의 화면.
★ 뷰포트 설정 : <meta> 태그로, <head> 태그에 위치해야함.
<meta name="viewport" content=" 뷰포트의 설정 값" >
☆ content에는 몇 가지 설정을 할 수 있음.
1) width(height) : 뷰포트의 가로(세로) 크기를 지정. px단위의 수치가 들어갈 수 있지만, 대부분 특수 키워드인 "device-width(height)"를 사용.(뷰포트의 크기를 기기의 스크린 width(height) 크기로 설정한다는 의미.)
2) initial-scale : 페이지가 처음 나타날 때 초기 줌 레벨 값을 설정.(소수값)
3) user-scalable : 사용자의 확대/축소 기능을 설정할 수 있음.
대부분의 모바일 웹 사이트의 뷰포트 설정은 아래와 같음!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
학습한 강의 : https://www.boostcourse.org/cs120/joinLectures/33586
⭐공부한 걸 토대로 간단히 만들어본 반응형 웹페이지(라고 쓰고 과제라고 읽는다^_^*) : https://linason-esc.github.io/week2_html_css/
'개발냥발 > FE (FrontEnd)👩🏻💻' 카테고리의 다른 글
| React 익히기❗ (0) | 2022.05.30 |
|---|---|
| Javascript 활용하기❗ (0) | 2022.05.25 |
| Javascript 익히기❗ (0) | 2022.05.16 |
| HTML 익히기❗ (0) | 2022.05.09 |
| Git 과 Github 익히기❗ (0) | 2022.05.01 |