css의 이해와 기본 구조, 문법
HTML에 적용하는 방법
텍스트 꾸미기
기본적인 박스 모델
MDN, W3C School에서 속성 검색하고 사용하기
CSS
Cascading Style Sheets → 좋은 사용자 경험(UX; User Experience)을 제공
스타일링 도구이기 때문에 독립적으로 기능하지 않고, HTML가 있어야 동작한다
🍭 사용자 인터페이스(UI; User InterFace)
인터페이스: 컴퓨터와 교류하기 위한 연결고리 - 이전 시대에는 CLI(Command Line Interface)를 사용해야 했다
⚒️ 기본 구조와 문법
body {
margin: 0;
padding: 0;
background: #fff;
color: #4a4a4a;
}
header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #4a4a4a;
color: #f9f9f9;
}
nav {
background: #eee;
}
main {
background: #f9f9f9;
}
aside {
background: #eee;
}
💁♀️ 위 CSS 코드에서 등장하는 속성은?
✍️ margin, padding, background, color, font-size, text-align, background-color
💁♀️ 텍스트의 가운데 정렬을 하기 위한 속성은?
✍️ text-align: center
💁♀️ 글자 색을 바꾸기 위한 속성은?
✍️ color
💁♀️ 배경 색을 바꾸기 위한 속성은?
✍️ backgroud-color
💁♀️ background 속성과 background-color 속성은 어떻게 다른가?
✍️ background은 image, repeat 옵션 등을 부여할 수 있지만
background-color는 색깔 속성만 부여할 수 있다
💁♀️ em의 의미는?
✍️ 상대 단위로, 본문의 폰트 사이즈를 1em로 두고 상대적인 크기를 나타낸다
🎨 HTML에 적용하기
link 태그
1. HTML 파일과 다른 파일을 연결한다
2. rel: 연결하고자 하는 파일의 역할이나 특징
3. href: 파일의 위치 추가
<head>
<meta charset="UTF-8" />
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css" />
</head>
🥯 관심사 분리
1. 인라인 스타일: 같은 줄에서 스타일 적용
2. 내부 스타일 시트: style 태그
3. 외부 스타일 시트
HTML 태그에 직접 CSS 속성을 추가할 수 있으나 권장하지 않는다
HTML은 웹 페이지의 구조와 내용만 담당하고, CSS는 디자인만 담당하도록 한다
예외: CSS 내용이 많지 않은 경우
🥅 기본적인 셀렉터
· id 붙이기
❓ navigation section 아래의 <h4> 요소만 색을 바꾸고 싶다면? 이 엘리먼트에 id를 붙인다
1. 이름에는 의미를 담는다
2. id가 있는 요소를 선택할 때는 #를 사용한다
3. 하나의 문서에서 한 요소에만 사용한다
4. 주로 특정 요소에 이름을 붙인다는 개념
<h4 id="navigation-title">This is the navigation section.</h4>#navigation-title {
color: red;
}
· class로 스타일 분류
1. id보다 더 많이 사용된다
2. class를 선택할 때는 .를 사용한다
3. 주로 스타일 분류에 사용
아래와 같은 경우 id를 사용할 수 없다 → id 3번 규칙 위반
<ul>
<li class="menu-item">Home</li>
<li class="menu-item">Mac</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">iPad</li>
</ul>.menu-item {
text-decoration: underline;
}
· 여러 개의 class를 하나의 엘리먼트에 적용
위에서는 여러 엘리먼트에 하나의 class를 적용한 것이다
띄어쓰기로 class를 구분한다
<li class="menu-item selected">Home</li>.selected {
font-weight: bold;
color: #009999;
}h1 { }
* { } 전체 요소
section, h1 { } Tag
#only { } ID
.widget { } class
a[href] { } attribute
header h1 {} 후손
header > p { } 자식
section + p { } 인접 형제(지정한 요소의 바로 다음에 위치한 요소만)
section ~ p { } 형제
a:link { } 가상
input:checked + span { } 요소 상태
p:first-child { } 구조 가상 클래스: p에서 첫 번째 자식 엘리먼트 선택
p:first-of-type { } 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택
input:not([type="password"]) { } 부정
input[type="text"]:valid { } 정합성 확인
🍄 텍스트 꾸미기
색상: color, background-color, border-color(박스 테두리 색상)
글꼴: font-family: "글꼴명 1", "글꼴명 2(글꼴명 1에 문제가 생겼을 경우 이 폰트 사용)";
· 웹 폰트 기술: https://d2.naver.com/helloworld/4969726
· 웹 폰트 서비스: https://fonts.google.com/
크기: font-size
· 절대 단위: px, pt 등 - 인쇄와 같이 화면의 사이즈가 정해진 경우 유리
· 상대 단위: %, em, rem, ch, vw, vh 등
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
정렬: text-align(가로 정렬) - left, right, center, justify(양쪽 정렬)
※ vertical-align(세로 정렬): 부모 요소의 display 속성이 table-cell이어야 한다
정렬하고자 하는 글자를 둘러싸고 있는 '박스의 높이 > 글자 높이' 일 때 적용 가능.
박스 모델
Block level element
HTML에서 줄바꿈이 적용되는 태그: <h1>, <p>
inline level element
HTML에서 줄바꿈이 적용되지 않는 태그: <span>
CSS 코드에서 실제 작동하지 않는 것: span
줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
inline 박스는 width, height 속성이 적용되지 않는다
inline-block 박스는 width, height 적용이 되고, inline 박스처럼 자체적인 고유의 크기를 가진다
🖼️ 박스의 구성 요소
border(테두리)
p {
border: 1px solid red;
}1. border-width
2. border-style
3. border-color
<border-style mdn>
💁♀️ 테두리를 점선으로 만들고 싶다면?
✍️ dotted
💁♀️ 테두리를 둥근 모서리로 만드려면 어떤 속성을 사용해야 하는가?
참고로, border 속성만으로는 둥근 모서리를 만들 수 없다
✍️ bored-radius - 다른 방법 탐색
💁♀️ 박스 바깥쪽에 그림자를 넣으려면 어떤 속성을 사용해야 하는가?
참고로, 그림자를 명확하게 보기 위해서는 background 속성이 불투명해야 한다
✍️ box-shadow
margin(바깥 여백)
top, right, bottom, left (시계 방향)
값을 두 개만 넣으면? top-bottom, left-right
값을 하나만 넣으면? 모든 방향
음수를 넣으면 다른 엘리먼트와의 간격이 줄어든다
p {
margin: 10px 20px 30px 40px;
}
padding(안쪽 여백)
margin과 동일하게 적용
배경색이나 border를 적용하면 안쪽 여백을 더욱 선명하게 확인할 수 있다
🍓 박스를 벗어나는 콘텐츠 처리
1. 박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않기 - overflow 속성에 hidden 값 사용
2. 박스 안에 스크롤 추가 - overflow-x 가로 방향, overflow-y 세로 방향
p {
height: 40px;
overflow: auto;
}
📏 박스 크기 측정 기준
여백과 테두리 두께를 고려해야 한다!
#container {
width: 300px;
padding: 10px;
background-color: yellow;
border: 2px solid red;
} 300px (콘텐츠 영역)
+ 10px (padding-left)
+ 10px (padding-right)
+ 2px (border-left)
+ 2px (border-right)
여백과 테두리 두께를 포함한 박스 계산법
레이아웃과 관련한 이야기를 할 때는 border-box 계산법 기준으로 이야기해야 한다
* {
box-sizing: border-box;
}'Etc > HTML & CSS' 카테고리의 다른 글
| 웹 앱 화면 설계하기 (0) | 2022.06.28 |
|---|---|
| 페이지 레이아웃 (0) | 2022.06.28 |
| HTML (0) | 2022.06.27 |
| 웹호스팅(github pages) (0) | 2021.03.14 |
| 웹사이트 완성 (0) | 2021.03.14 |
댓글