[HTML & CSS] CSS

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' 카테고리의 다른 글

[HTML & CSS] 웹 앱 화면 설계하기 (0)	2022.06.28
[HTML & CSS] 페이지 레이아웃 (0)	2022.06.28
[HTML & CSS] HTML (0)	2022.06.27
[HTML & CSS] 웹호스팅(github pages) (0)	2021.03.14
[HTML & CSS] 웹사이트 완성 (0)	2021.03.14

은하

[HTML & CSS] CSS

CSS

🍭 사용자 인터페이스(UI; User InterFace)

⚒️ 기본 구조와 문법

🎨 HTML에 적용하기

link 태그

🥯 관심사 분리

🥅 기본적인 셀렉터

· id 붙이기

· class로 스타일 분류

· 여러 개의 class를 하나의 엘리먼트에 적용

🍄 텍스트 꾸미기

박스 모델

Block level element

inline level element

줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

🖼️ 박스의 구성 요소

border(테두리)

margin(바깥 여백)

padding(안쪽 여백)

🍓 박스를 벗어나는 콘텐츠 처리

📏 박스 크기 측정 기준

여백과 테두리 두께를 포함한 박스 계산법

'Etc > HTML & CSS' 카테고리의 다른 글

댓글

티스토리툴바

[HTML & CSS] CSS

CSS

🍭 사용자 인터페이스(UI; User InterFace)

⚒️ 기본 구조와 문법

🎨 HTML에 적용하기

link 태그

🥯 관심사 분리

🥅 기본적인 셀렉터

· id 붙이기

· class로 스타일 분류

· 여러 개의 class를 하나의 엘리먼트에 적용

🍄 텍스트 꾸미기

박스 모델

Block level element

inline level element

줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

🖼️ 박스의 구성 요소

border(테두리)

margin(바깥 여백)

padding(안쪽 여백)

🍓 박스를 벗어나는 콘텐츠 처리

📏 박스 크기 측정 기준

여백과 테두리 두께를 포함한 박스 계산법

'Etc > HTML & CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바