*네이버 부스트코스의 웹 ui개발 공부한 것 정리*
1) 속성-정의와 구문
- CSS의 속성은 그 종류가 매우 다양하고, 지속적으로 업데이트 되고 있기 때문에 CSS 관련 서적이나 강의를 통해서 모든 속성을 파악하는 데는 어려움이 있음 -> CSS reference를 활용하는 것 추천
- 추천 사이트 - 1
- W3C: CSS 속성을 정의하는 W3C에서 제공하는 사이트이므로 가장 정확함 https://www.w3schools.com/cssref/default.asp
CSS Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
- 추천 사이트 - 2
- MDN: 개발적 버그나 추가적인 스펙에 대해서 확인하는데 용이함 https://developer.mozilla.org/ko/docs/Web/CSS
CSS: Cascading Style Sheets | MDN
Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌
developer.mozilla.org
- 확인 가능한 사항들
2) 속성-단위
- CSS 속성과 값을 사용할 때 값과 함께 많이 사용되는 것 중의 하나는 "단위"임
- 절대 길이
- 절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 영향을 받지 않음
- 예시: px, pt
- px (1px = 1/96th of 1 inch)
- 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적임
- 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위 사용을 권장
- pt (1pt-1/72 of 1 inch)
- 컴퓨터가 없던 시절부터 있던 단위임
- 인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위임
- 웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있음
- 그러나 사용하는 기기의 해상도에 따라 차이(Windows에서는 9pt = 12px, Mac에서는 9pt = 9px )가 있어 W3C에서도 pt는 웹 개발시 권장되지 않음
- px (1px = 1/96th of 1 inch)
- 상대 길이
- 상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변함
- 예시: %, em, rem, vw
- %
- 부모의 값에 대해서 백분율로 환산한 크기를 갖게 됨
- em (배수)
- 해당 단위가 사용되고 있는 요소의 font-size 속성값을 기준으로 값을 환산, 소수점 3자리까지 표현 가능,
- rem (배수)
- root(최상위 요소)의 font-size 속성값을 기준으로 값을 환산함, HTML에서 최상위 요소는 <html>이므로 html 요소의 font-size 속성 값이 기준이 됨, 초보자에겐 rem을 쓰도록 권고 (em의 경우에는 몇 px로 변환될지에 영향을 주는 변수가 많아서 재사용이 어렵고 유지보수가 힘들어지는 경향이 있음)
- vw
- viewport의 width값을 기준으로 1%의 값으로 계산됨
- %
See the Pen Untitled by kim seoyoung (@seoooo) on CodePen.
3) 속성-색상
- 색상 값 지정 방식
- 컬러 키워드
- CSS 자체에서 사용가능한 문자 식별자
- red, blue, black 등과 같이 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있음
- ** 참고: transparent는 투명을 나타내는 키워드 **
- 16진법 - 6자리 수
- #RRGGBB 로 표현함
- 각 자리수는 16진수(0-9, A-F)로 두 자리씩 세 가지 색상을 나타냄
- 첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG) 마지막 두 자리는 청색(BB)을 의미함
- 알파벳은 대소문자를 구분하지 않음
- 16진법 - 3자리 수
- #RGB 로 표현함
- 위 방식에서 같은 색을 표현하는 두 값이 같으면 3자리 수로 축약하여 사용 가능함
- 예를 들어, #aa11cc는 #a1c로 축약하여 사용 가능
- RGB()
- RGB 값은 rgb(R, G, B)의 형태로 각 변수 값(적색, 녹색, 청색)의 강도를 정의함
- 0~255의 정수로 된 값을 지정할 수 있으며, 0 -> 255는 검정 -> 흰색으로 값의 변화를 나타냄
- RGBA()
- RGBA 값은 기존 RGB에서 A(투명도) 값이 추가된 형태임
- A 값은 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기함
- 0 -> 1은 투명 -> 불투명으로 값의 변화를 나타냄
- 컬러 키워드
- 참고 사이트 - 1
- 존재하는 컬러 키워드 확인 가능
- https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
<named-color> - CSS: Cascading Style Sheets | MDN
The <named-color> CSS data type is the name of a color, such as red, blue, black, or lightseagreen. Syntactically, a <named-color> is an <ident>.
developer.mozilla.org
- 참고 사이트 - 2
- 원하는 색상의 RGB 값 추출하는 방법
- https://m.blog.naver.com/huan7677/220340509624
RGB 색상 추출하기
여러분, 하고싶은 작업이 있는데 어떻게 하는지 몰라 답답한적 있으신가요~? 저는 있습니다(너무 많아요ㅠ....
blog.naver.com
- 예시 코드
See the Pen 속성-색상 by kim seoyoung (@seoooo) on CodePen.
4) 속성-background
- background 속성으 요소의 배경에 관련된 속성을 지정할 때 사용함
- 배경에 관련된 속성에는 색상, 이미지, 반복 여부 등 여러 속성이 존재하고, 이를 한 번에 모아서 사용할 수도 있음
- background-color
- 배경의 색상을 지정하는 속성
- 기본 값: transparent
- background-image
- 배경으로 사용할 이미지의 경로를 지정하는 속성
- 기본 값: none
- url의 경로는 절대 경로, 상대 경로 모두 사용 가능
- 만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면, 해당 부분에 background-color 색상이 노출됨
- background-repeat
- 이미지의 반복 여부와 방향을 지정하는 속성
- 기본 값: repeat
- 기본 값이 repeat이기 때문에 따로 설정하지 않으면 x, y 축으로 반복되어서 표시됨
- 속성 값으로 사용할 수 있는 것들은 다음과 같음
- background-position
- 요소에서 배경 이미지의 위치를 지정하는 속성
- 기본 값: 0% 0%
- x축, y축으로부터의 위치를 지정할 수 있으며, 값의 선언 순서는 x축, y축으로부터의 간격임
- 만약 한쪽만 지정된다면 나머지는 중앙 값(center)으로 적용됨
- 속성 값으로 사용할 수 있는 것들은 다음과 같음
- background-attachment
- 화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성
- 기본 값: scroll
- 속성 값으로 사용할 수 있는 것들은 다음과 같음
- ** local은 자주 쓰이지 않으므로 일단넘어감, scroll과 fixed의 차이만 알고 가기 **
- background 축약
- 코드 예시
See the Pen 속성-background by kim seoyoung (@seoooo) on CodePen.
5) 속성-boxmodel
- HTML의 모든 요소는 사각형의 박스 형태로 만들어짐
- 이 박스는 총 4가지의 세분화된 영역으로 구성되어있으며 영역마다 다양한 스타일을 적용할 수 있음
- 이 4가지 영역을 통틀어서 boxmodel이라 함
- boxmodel의 구성
- Content 영역
- 요소의 실제 내용을 포함하는 영역
- 크기는 내용의 너비 및 높이를 나타냄
- Border 영역
- content 영역을 감싸는 테두리 선을 포함하는 영역
- Padding 영역
- content 영역과 테두리 사이의 여백을 padding이라 함
- content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미침
- 따라서 padding을 content의 연장으로 보기도 함
- Margin 영역
- 테두리 바깥쪽 영역을 margin이라 함
- border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역
- 주변 요소와의 여백(간격)을 margin을 이용해 지정할 수 있음
- 코드 예시
See the Pen Untitled by kim seoyoung (@seoooo) on CodePen.
6) 속성-border
- 요소의 테두리에 관련된 속성을 지정할 때 사용함
- 테두리의 굵기, 모양, 색상을 지정할 수 있는 속성들이 있으며 축약하여 적용할 수도 있음
- border-width
- 선의 굵기를 지정하는 속성
- 기본 값: medium
- border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수도 있음
- 여러 축약형을 가짐
- 속성 값 예시
- border-style
- 선의 모양을 지정하는 속성
- 기본 값: none
- border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 모양를 다르게 표현할 수도 있음
- 속성 값 예시
- border-color
- 선의 색상을 지정하는 속성
- 기본 값: currentColor
- border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 모양를 다르게 표현할 수도 있음
- border 축약
- 사용 방법
- 코드 예시
- 사용 방법
- 코드 예시
See the Pen 속성-border by kim seoyoung (@seoooo) on CodePen.
7) 속성-padding
- padding 속성
- 기본 값: 0
- 속성 값 예시
- padding-top: content 영역의 위쪽 여백을 지정함
- padding-right: content 영역의 오른쪽 여백을 지정함
- padding-bottom: content 영역의 아래쪽 여백을 지정함
- padding-left: content 영역의 왼쪽 여백을 지정함
- syntax
- 기본적으로 padding의 4가지 속성을 위와 같이 축약하여 사용할 수 있음
- 속성의 순서는 고정되어있으며, 위쪽을 기준으로 시계방향으로 돌아간다고 생각하면 쉬움
- 축약형으로 사용할 때 반드시 4개의 속성에 대한 값을 모두 적어야 하는 것은 아님
- 속성값은 1~4개의 값을 사용할 수 있으며 상하, 좌우 영역의 값이 같을 때 하나로 합쳐서 적용할 수 있음
- ** 참고: CSS에서 0 값에 대해서는 단위를 따로 적지 않음 (0px = 0% = 0em ... => 0) **
- 코드 예시
See the Pen 속성-padding by kim seoyoung (@seoooo) on CodePen.
8) 속성-margin
- margin은 다른 요소와의 간격을 만들 수 있음
- Padding과 사용하는 방식이 유사하지만 몇 가지 차이점이 있으므로 이에 유의할 것
- margin 속성
- 기본 값: 0
- 속성 값 예시
- margin-top: border 영역의 위쪽 여백을 지정함
- margin-right: border 영역의 오른쪽 여백을 지정함
- margin-bottom: border 영역의 아래쪽 여백을 지정함
- margin-left: border 영역의 왼쪽 여백을 지정함
- syntax
- padding과 마찬가지로 축약하여 사용할 수 있고, 상하/좌우에 대해서 값이 같으면 하나로 합하여 사용할 수 있음
- margin에서는 수치 이외에 사용할 수 있는 'auto' 값이 있음
- margin auto
- 기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0 (기본 값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가짐
- width랑 함께 사용
- 이를 활용하여 수평 중앙 정렬을 할 수 있음
- 좌우의 margin이 모두 auto로 적용되었다면, 브라우저는 요소가 가질 수 있는 가로 영역에서 자신의 width를 제외한 나머지 여백의 크기에 대해 균등 분할하여 적용함 -> 수평 중앙 정렬
- 상하의 경우 수직 중앙 정렬이 되지 않음
- margin collapse (마진 병합)
- 마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미함
- 마진 병합이 일어나는 경우는 다음의 세가지 경우가 있음
- 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어남
- 부모 요소의 첫 번째 자식 요소 또는 마지막 자식 요소
- 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합이 일어남
- 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합이 일어남
- 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합이 일어남
- 마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않음
- 마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2, 3번째의 경우 패딩 및 보더가 없어야 함
- 코드 예시
See the Pen 속성-margin by kim seoyoung (@seoooo) on CodePen.
9) 속성-margin&padding
- padding과 margin은 모두 여백이 필요로 할 때 적용하는 속성이기 때문에 border의 경계가 명확하게 표시되지 않으면 어떤 속성으로 필요한 여백을 표현할지 헷갈릴 수 있음
- 자신이 원하는 속성을 이용해서 여백을 표현하여도 상관은 없지만 엄연히 다른 속성이기 때문에 두 속성의 차이를 명확히 알고 사용할 수 있어야 함
- margin과 padding의 비교
- 음수 값 사용 가능 여부
- 왜 margin은 음수 값 적용이 가능하고, padding은 적용되지 않을까?
- padding은 뼈와 우리 피부 사이의 지방이라고 생각하고, margin은 사람과 사람 사이의 간격이라고 생각하면 쉬움. 지방은 아무리 뺀다고 해서 피부가 뼈보다 밑으로 갈 수 없을 뿐만 아니라, 0 이하가 될 수 없으므로 양수만 된다고 생각하면 됨. 그러나 사람과 사람 사이는 멀리 떨어질 수도 있지만, 서로 겹쳐서 서 있을 수도 있으므로 음수 값이 가능하다고 생각하면 됨
- %값의 사용과 기준점
- css 속성을 사용하면서 어떤 값을 적용할 때 이 단위를 적용할 수 있을까? 라는 생각을 가지고 코딩하는 자세는 매우 중요함
- margin과 padding은 px과 같은 고정적인 단위 외에도 %라는 상대적인 단위를 사용할 수 있음
- %는 요소의 크기를 기준으로 상대적인 값을 결정짓게 됨. 얼핏 생각하면, 상하는 height 값에 대해 좌우는 width 값에 대해 크기가 계산될 것 같지만 그렇지 않음. -> %는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정됨
- 만약 위와 같은 코드의 경우에는 margin과 padding이 모두 20px 10px 20px 10px으로 적용되는 것이 아니라, 10px 10px 10px 10px 값으로 적용됨
- 음수 값 사용 가능 여부
- 코드 예시
See the Pen 속성-margin&padding by kim seoyoung (@seoooo) on CodePen.
10) 속성-width
- width 속성은 요소의 가로 크기를 정의하는 데 사용함
- 정확히는 content 영역의 너비를 지정함
- 크기를 지정한다는 것은 같지만, 요소의 종류나 특징에 따라서 다르게 동작하기도 함
- 인라인 레벨 요소를 제외한 모든 요소에 적용됨
- width 속성
- 기본 값: 0
- 속성 값 예시
- width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, 그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받음 (content, padding, border)
- 위와 같이 선언되어 있다면 요소의 총 가로 크기는 160px이 됨 (100 + 20*2 + 10 * 2 = 160px)
- 또한, width는 %를 이용해서도 크기를 지정할 수 있음
- 위와 같이 코드를 적용했을 때 .child의 크기는 어떻게 적용될까?
- 150 (부모의 width인 300 px의 50%) + 20 * 2 + 10 * 2 = 210px
- 결국 % 값일 때에는 부모의 width값에 대해서 계산되어지는데, 이때 부모의 width는 content 영역의 크기를 의미
- 부모가 인라인 레벨 요소일 때는, 자식(블록 요소)이 width 값에 %를 가지면, 가장 가까운 블록 레벨인 조상의 width를 기준으로 계산됨. 만일 최상단까지 블록 레벨 요소가 없으면 body를 기준으로 계산됨
- ** 참고: width는 기본적으로 content 영역의 너비를 지정하는 것이고, box-sizing 값은 content+padding+border 값임 **
11) 속성-height
- height은 요소의 세로 크기를 정의하는 데 사용하는 속성
- width와 마찬가지로 정확히는 content 영역의 높이를 지정
- 기본적으로 width의 동작 방식과 같게 동작하지만, % 값을 가졌을 때의 동작 방식이 조금 다름
- height 속성
- 기본 값: 0
- 속성 값 예시
- 예를 들어 고정 값으로 height을 지정했다면,
- 요소의 총 세로 크기는 150px이 됨 (100 + 10*2 + 15 * 2 = 150px)
- %로 height을 지정했다면,
- .child의 높이는 어떻게 적용될까?
- height: auto 일 때와 아무 차이가 없음
- 이유는 부모 요소가 명시적인 높이 값을 가지고 있지 않기 때문에 자식의 높이를 %값으로 지정해줘도 적용되지 않았던 것
- 부모 코드에 height: 200px로 명시적인 높이 값을 지정해주면 아래와 같이 적용되는 것을 확인할 수 있음
12) 속성-boxmodel 정리
- 박스 모델은 content, padding, border, margin의 총 4가지 영역으로 나누어 짐
- content 영역의 너비와 높이는 width, height를 통해서 제어할 수 있음
- 요소의 전체 크기 = content + padding + border
- 다른 요소와의 여백은 margin을 이용하여 줄 수 있으며 음수값 사용 가능
- margin은 상하 요소 사이의 병합 현상이 일어나고 이때, 큰 값을 기준으로 병합됨
'HTML&CSS' 카테고리의 다른 글
| 7. 레이아웃 (0) | 2022.09.30 |
|---|---|
| 6. 폰트, 텍스트 (0) | 2022.09.30 |
| 4. CSS 이해하기 (0) | 2022.09.15 |
| 3. 콘텐츠모델, 시멘틱마크업, 블록&인라인 (0) | 2022.09.13 |
| 2. HTML 태그 (0) | 2022.09.13 |