▶ HTML / CSS 기본 용어 학습하기 좋은 사이트
W3Schools Online Web Tutorials
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
※ 모르는 키워드 / 용어 등을 탐색하고 학습하기 좋은 사이트 (#감 익히기)
[용어 정리]
1. element와 tag
| element(요소) | tag |
| 태그와 내용(contents)으로 이루어진 것 | <head>, <body>, <title>, <list> etc.. |
2. CSS_short hand
| short hand(O) | short hand(x) |
| margin : 10px 20px 30px 40px; | margin-top : 10px; margin-right : 20px; margin-bottom : 30px; margin-left : 40px; |
※ 시계방향으로 적용됨
3. margin / border / padding
| 순번 | 용어 | 설명 |
| 1 | margin | 박스의 외부 경계와 다른 요소들 사이의 (element간의) 공간 - 박스 간의 거리를 설정하여 요소들이 서로 얼마나 떨어져 표시될지 정함 |
| 2 | border | 박스의 경계선 자체를 의미 - 경계선은 박스의 크기와 스타일을 결정할 수 있으며, 색상과 두께 등을 설정할 수 있음 |
| 3 | padding | 박스의 내부 경계(border)와 콘텐츠 사이의 공간 - 즉, 콘텐츠가 박스 내부에서 얼마나 떨어져 있을지를 결정 |
4. html / css에서 가장 많이 사용하는 측정단위
| 픽셀(pixel)_px |
| 스크린 상에서 하나의 픽셀을 기준으로 삼는 절대 단위 - 대부분의 웹 디자인에서는 픽셀을 사용하여 정밀한 레이아웃을 설정 |
※ etc) vh / vw, %, rem, em등이 존재함
[속성 더 이해하기]
1. <form>태그의 'id'와 'name' 속성의 차이
| id | name |
| 중복 불가(문서 유일) | 중복 가능 |
| 서버로 값이 이동하지 않음 | 폼 데이터(value)를 서버에 제출함 |
| CSS / JS에서 사용됨 | PHP / JS에서 사용됨 |
※ js공부를 통해 심층 이해 필요
2. padding에서 box-sizing을 신경써야하는 이유
- 요소의 최종적인 크기를 예측하고, 의도한 대로 레이아웃을 유지하기 위함
| content-box (기본) | border-box |
| ∴ width = content 즉 padding + width = 크기 변경 |
∴ width = box padding + width = 크기 유지 |
| - 요소의 너비와 높이가 content 영역에만 적용 - padding 추가 시 요소의 전체 크기가 예상보다 커짐 |
- `padding`/`border` 요소의 너비와 높이에 포함되어 계산 - 설정한 크기가 패딩과 테두리를 포함한 요소의 실제 크기가 되어, 레이아웃을 훨씬 쉽게 관리 |
| - 요소의 width와 height가 내용 영역에만 적용 - 패딩과 테두리는 요소의 총 크기에 추가적으로 계산 |
- 요소의 width와 height가 내용, 패딩, 테두리를 포함한 전체 크기로 적용됨 - 디자인을 단순화하고, 크기 조정이 더 예측 가능 |
| 순번 | 특징 | 설명 |
| 1 | 일관된 크기 계산 |
- border-box는 요소의 최종 크기를 예측하기 쉽게 만들어 줌 - 너비와 높이가 패딩과 테두리를 포함한 크기로 설정되기 때문에, CSS에서 지정한 크기대로 요소가 화면에 표시됨 - 특히 여러 컴포넌트의 크기를 일관되게 유지해야 할 때 유용 |
| 2 | 레이아웃의 간편성 |
- content-box에서는 요소의 패딩이나 테두리를 변경할 때마다 요소의 실제 크기가 변경되므로, 레이아웃을 조정하기 위해 추가 계산이 필요 - 반면, border-box는 이러한 추가 계산 없이도 요소의 크기를 조정할 수 있게 해줌 |
| 3 | 반응형 디자인 |
- border-box를 사용하면 패딩과 테두리가 요소의 전체 크기에 포함되므로, 미디어 쿼리를 사용하여 레이아웃을 조정할 때 더욱 효과적 - 화면 크기가 변경되어도 요소의 실제 크기는 동일하게 유지되어, 디자인이 더 일관되게 유지됨 |
| content-box | border-box |
| - 요소의 width와 height가 내용 영역에만 적용 - 패딩과 테두리는 요소의 총 크기에 추가적으로 계산 |
- 요소의 width와 height가 내용, 패딩, 테두리를 포함한 전체 크기로 적용됨 - 디자인을 단순화하고, 크기 조정이 더 예측 가능 |
▶ 참고 문서(https://www.w3schools.com/css/css3_box-sizing.asp)
3. CSS_display 속성 (block / inline / inline-block)
| block | inline | inline-block |
| 1. 항상 새로운 줄에서 시작 2. 모든 가로 공간을 차지 3. 너비, 높이, 마진 및 패딩 자유롭게 설정 가능 |
1. 다른 요소와 같은 줄에 위치 2. 너비와 높이 설정 불가 3. 마진과 패딩은 좌우에만 적용 |
1. inline의 줄에 배치되는 특성 2. block의 너비/높이를 설정 특성 ∴ 같은 줄에 다른 요소와 함께 배치 + 너비와 높이 설정가능 |
| ex) <div>, <p> | ex) <span>, <a> | ex) <button>, <input> |
▶ 참고문서 (https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1)
4. CSS_vertical-align(인라인 요소 or 테이블 셀 요소의 수직 정렬을 결정)
| vertical-align : text-top; | vertical-align : super; |
| - 요소의 상단을 행의 텍스트 최상단에 맞춤 - 즉, 이미지의 최상단이 주변 텍스트의 가장 높은 부분과 동일한 라인에 위치 |
- 텍스트의 기준선보다 높은 위치로 요소를 올리는 것 - 이는 text-top보다 일반적으로 더 높은 위치 |
▶ 참고문서 (https://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align)
※ text-align (https://www.w3schools.com/css/css_text_align.asp)
5. CSS_flexbox : 복잡한 레이아웃을 쉽고 효율적으로 설계할 수 있게 도움을 주는 도구 ⇒ display : flex
| CSS FLEX를 사용하는 이유 | ||
| 1 | 유연성 | 컨테이너 안의 아이템들이 여백, 크기 등을 조절하여 가능한 공간을 채울 수 있도록 함 |
| 2 | 간단한 정렬 | 수평 정렬(horizontally)이나 수직 정렬(vertically)을 쉽게 할 수 있음 즉 아이템들을 중앙에 배치하거나 공간을 균등하게 분할하는 것이 훨씬 간단해짐 |
| 3 | 반응형 디자인 |
다양한 디스플레이 장치와 화면 크기에 따라 요소들의 배치와 크기를 자동으로 조정함 - 모바일 기기와 데스크탑에서의 일관된 사용자 경험을 제공 |
| 4 | 복잡한 레이아웃 간소화 |
전통적인 CSS 레이아웃 기법(예: float, positioning)에 비해 코드가 더 직관적이고 적은 양으로 복잡한 레이아웃을 구현할 수 있음 |
| 5 | 유지보수 및 확장성 |
레이아웃 관련 코드를 더 쉽게 이해하고 수정 |
| CSS FLEX 특성 | ||
| 1 | Flex Container / Flex Items |
flex container와 그 안의 flex items로 구성됨 - Container는 items의 레이아웃을 결정하는 속성을 가지고 items는 각각의 속성으로 조정 |
| 2 | 방향성 | flex-direction 속성을 사용하여 아이템들이 행(row)이나 열(column)로 나열될지 결정할 - 이는 요소들의 주 축(main axis)과 교차 축(cross axis)의 방향을 결정 |
| 3 | 정렬 | justify-content, align-items, align-self 등의 속성을 통해 아이템들을 주 축과 교차 축에서 어떻게 정렬할지 결정할 수 있음 |
| 4 | 크기 조절 | flex-grow, flex-shrink, flex-basis 등의 속성을 사용하여 아이템의 크기를 유연하게 조정 - 더 큰 화면에서는 요소를 확장하거나, 작은 화면에서는 축소할 수 있음 |
∴웹 레이아웃을 더 동적이고 유연하게 만들어 줌(배치를 유연하고 효율화 할 수 있도록 사용)
▶ 참고문서 (https://www.w3schools.com/css/css3_flexbox_container.asp)
※ justify-content (https://www.w3schools.com/cssref/css3_pr_justify-content.php)
※ align-items(https://www.w3schools.com/cssref/css3_pr_align-items.php)
※ 참고 블로그(https://blog.naver.com/leeminwok/222482570193)
5-1. flexbox 모델 이해 : Flexbox를 부모 요소에 적용하는 이유는, 부모를 컨테이너로 설정함으로써
자식 요소들을 유연하고 효율적으로 정렬 및 배치하기 위함
| 부모(container) | 자식(item) |
| Flex container | Flex item |
※ flex container의 기본 아이템은 row(행)으로 배치됨
6. CSS_position
| 순번 | 속성 | 설명 |
| 1 | static | 기본값, 요소가 일반적인 문서 흐름을 따름 - top, right, bottom, left 및 z-index 속성이 적용되지 않지만, margin은 정상적으로 작동 |
| 2 | realtive | 요소가 일반적인 문서 흐름을 따르지만, 자신의 원래 위치를 기준으로 이동할 수 있음 - top, right, bottom, left를 사용하여 원래 위치에서 상대적으로 이동 |
| 3 | fixed | 요소가 뷰포트(viewport)에 대해 고정됨 - 스크롤을 해도 요소는 화면의 같은 위치에 고정되어 보임 |
| 4 | sticky | 스크롤에 따라 relative에서 fixed로 변할 수 있는 위치 - 스크롤 위치에 따라 요소가 일정 범위 내에서 고정되어 따라옴 |
| 5 | absolute | 가장 가까운 위치 지정(positioned) 조상 요소에 대해 상대적으로 배치 - 조상 중 position이 static이 아닌 요소를 기준으로 위치를 설정하며, 없을경우 <body>를 기준 |
※ position에서만 사용되는 top / right / bottom / left 유의하기
| margin-left | position : left |
| - 요소와 그 주변 요소들 사이의 공간 조정 - 레이아웃 내에서 요소들 사이의 관계를 설정 위치를 직접적으로 조정하려면 left를, 요소들 사이의 간격을 조정하려면 margin-left를 사용하면 됩니다. |
- 요소의 실제 위치를 조정하는 데 사용 - 요소의 위치 지정 속성(position)에 따라 다르게 작동 |
| ∴ 요소들 사이의 간격을 조정 | ∴ 위치 직접적으로 조정 |
| margin-left | position : left |
| - 사각형 옆의 공간이 10픽셀 만큼 늘어남을 보여주며, 이는 사각형 자체는 움직이지 않고 주변 공간만 확장됨 |
- 10px는 사각형이 기준 위치로부터 오른쪽으로 10픽셀 이동한 것을 보여주며, 이는 사각형 자체의 위치가 변경됨 |
▶ 참고문서 (https://www.w3schools.com/css/css_positioning.asp)
6-1. CSS_position : absolute
| top : 0px | top : 50px |
| - 0px은 요소의 상단을 기준점의 맨 위, 즉 가장 상단 위치 - 요소가 화면의 맨 위나, 가장 가까운 위치 지정된 조상의 맨 위에 붙어 있게 함 |
- 기준점으로부터 아래로 50픽셀 떨어진 위치에 - 결과적으로 요소는 더 아래쪽에 위치 |
∴ 디스플레이 장치의 화면을 위에서 아래로 읽는 것과 유사하게, 수치가 커질수록 하단으로 내려가는 것
| right : 0px | right : 20px |
| - 요소의 오른쪽 경계를 기준점의 오른쪽 경계와 정확히 일치하게 배치 - 요소가 화면 또는 조상 요소의 오른쪽 끝에 바짝 붙어 있음 |
- 요소의 오른쪽 경계를 기준점의 오른쪽 경계로부터 20픽셀 떨어진 위치에 배치 - 결과적으로 요소는 왼쪽으로 20픽셀 이동 |
∴ 요소의 경계가 기준점으로부터 얼마나 떨어져 있어야 하는지를 지정
▶ 참고문서 (https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute)
'html, css' 카테고리의 다른 글
| [css] 속성 이해하기_6-6, 6-7, 6-8 (0) | 2023.08.04 |
|---|---|
| [css] CSS BOX MODEL (0) | 2023.08.03 |
| ★[html/css] 코로나 속 복습 6-1~6-5까지_카카오톡 홈화면 예시 (8.2~8.3) (0) | 2023.08.02 |
| [html/css] Zoom talk 만들기_노마드코더보고 따라하기(CSS.5) (0) | 2023.07.30 |
| [css] BEM 사용하기 (0) | 2023.07.30 |