📌 학습한 내용
1. CSS 시작
<HTML에서 CSS 스타일을 적용하는 방법>
1. 디자인을 적용할 태그를 선택해서 <style>를 사용
<head>
<style>
h1{color: red;
}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>CSS코드는 {}(중괄호) 안쪽에 작성해야 한다.
- 디자인을 적용할 태그 안에 직접
<style>의 속성값 입력
<body>
<h1 style="background-color: pink;">Hello world</h1>
</body>
👉 위의 두 방법은 가독성이 떨어지는 단점을 가지고 있다. (한 문서안에서 HTML언어와 CSS언어가 혼재된 상태)
- 파일을 따로 만들어 각각 작성해 연결
- html
<link rel="stylesheet" type="text/css" href="style.css">- css
h1 {font-size: 80px;}
<디자인의 '유전'>
아래 코드에서 <header>와 <h1>, <p>, <a>는 부모 자식 관계에 있다. 부모 태그에 디자인을 적용하면 자식 태그에도 디자인이 유전된다.
<header>
<h1>haeder h1</h1>
<p>header p</p>
<a href="#">네이버</a>
</header>header {color: red;}
그러나 부모의 유전자를 모두 자식이 받는 것은 아니다. <a>와 같이 자체적으로 가진css가 있으면 부모가 가진 유전자의 영향을 받지 않는다. 또한 부모의 모든 유전자를 자식이 받는 것도 아니다.
h1 {color: blue;}
p {color: green;}
자식 관계의 <h1>, <p>에 직접적으로 스타일을 적용하면, 부모에게 적용되어 유전된 스타일보다 우선된다.
<header>
<h1>haeder h1</h1>
<p>header p</p>
<a href="#">네이버</a>
</header>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer>header h1,
footer h1 {color: blue;}
header p,
footer p{color: green;}
각각의 부모 태그 내부의 자식 태그에 스타일을 적용할 수 있다. 또한 ,를 넣어 and 형식으로 사용해 각기 다른 부모 태그 내부의 특정 태그들에게 스타일을 지정할 수 있다.
2. 선택자
(1) 타입 선택자
- html태그를 기준으로 접근하고자 할 때
<h1>Hello World</h1> h1 {color: red;} 
(2) ID 선택자
- 태그에 고유의 이름을 부여해서 사용
<h2 id="test1">Nice to meet you</h2>CSS에서는 #을 붙여 불러온다.
#test1 {color: blue;}
(3) Class 선택자
id와 비슷하게, 태그에 별명을 부여
<h3 class="test2">Welcome</h3>CSS에서는 .를 붙여 불러온다.
.test2 {color: green;}
👉 id 와 class는 동일한 태그를 여러 번 사용했지만, 각각의 태그에 다른 스타일을 부여하고 싶을 때 고유의 값을 지정하기 위해서 사용한다.
👉 <id와 class의 차이>
1. id는 이름, class는 별명의 개념. 이름은 단 하나의 속성값을 쓸 수 있다. 반면 별명은 여러 개의 속성값을 추가할 수 있다.
id에 여러 속성값을 입력하면 오류로 인식
<h2 id="color-1 font-style-1">ID 선택자</h2>#color-1 {color: red;}
#font-style-1 {font-style: italic;}
class에서는 정상적으로 작동
<h3 class="bg-1 font-size-1">Class 선택자</h3>.bg-1 {background-color: red;}
.font-size-1 {font-size: 50px;}
2. 동일의 id의 속성값은 하나의 문서에 여러 개 존재할 수 없다. (오직 한 개만 존재) 반면 동일한 class명을 하나의 문서 안에서 어떤 태그에서 든지 재사용이 가능하다.
👉 id와 class의 속성값을 이용해 부모와 자식관계로 디자인 작업을 진행할 수 있다.
<header id="intro">
<div class="container">
<h2>header h2</h2>
<p>header p</p>
</div>
</header>#intro h2 {color: red;}
#intro .container p {color: blue;}
(4) Attribute 선택자 (속성 선택자)
- html의 타입의 속성값을 가지고 디자인을 적용
<input type="text" placeholder="이름">
<input type="password" placeholder="비밀번호">input[type="text"] {border: solid 10px red;}
input[type="password"] {border: solid 10px blue;}
3. 캐스케이딩
(참고 사이트 : https://ofcourse.kr/css-course/%EC%A0%81%EC%9A%A9-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84 )
- CSS 코드를 작성할 때, 어떠한 디자인을 우선적으로 처리할지 우선순위에 영향을 미치는 개념
- 일반적으로 동일한 타입 선택자를 사용했을 경우, 나중에 적용된 css의 속성값의 우선순위가 높다.
<h1>Hello World</h1>h1 {color: red;}
h1 {color: blue;}
- 태그와
class로 디자인을 적용했을 때, 작성 순서에 상관없이 class의 우선순위가 높다.
<h1 class="color-1">Hello World</h1>.color-1 {color: green;}
h1 {color: red;}
h1 {color: blue;} 
class와id를 비교했을 때,id의 우선순위가 더 높다.
<h1 id="color-2" class="color-1">Hello World</h1>#color-2 {color: pink;}
.color-1 {color: green;}
h1 {color: red;}
h1 {color: blue;}
id와style속성을 비교했을 때,style의 우선순위가 더 높다.
<h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>#color-2 {color: pink;}
.color-1 {color: green;}
h1 {color: red;}
h1 {color: blue;}
👉 (우선순위) style 속성 > id > class > 태그
- 디테일 하게 작성 할수록 우선순위가 높아진다.
<header id="intro">
<div class="container">
<h1>header h1</h1>
</div>
</header>#intro .container h1 {color: pink;}
#intro div h1 {color: green;}
#intro h1 {color: blue;}
header h1 {color: red;}
👉 (결론) 원본 코드를 유지하면서 새로운 디자인으로 덮어씌우고자 할 때 사용
4. CSS의 기본 속성
(1) 공간을 만드는 속성 : width, height
<div>
<h1>Nice</h1>
</div>div {
width: 100%;
height: 300px;
min-width: 600px; /* 하한선 */
max-width: 800px; /* 상한선 */
}width/height의 값으로 % 를 사용하면 공간의 크기가 가변적이게 된다. 이때 가변값의 기준점을 알아야 한다. 또한 부모 태그의 영향을 받게 된다.- 기본적으로
<body>는 브라우저의 크기와 동일하다. - px(픽셀) 로 단위를 설정하게 되면 브라우저 크기에 상관없이 고정값을 가지게 된다.
min-width/max-width: % 를 적용한width안에서 사용
div {
border: solid 10px red;
border-radius: 50px;
opacity: 1;
background-color: yellow;
}border: 선의 종류, 굵기, 색상 -> 순서는 상관xborder-radius: 귀퉁이에 라운드 적용opacity: 투명도 (0~1, 0을 적용하면 화면에 노출되지는 않는다.)background-color: 배경색
(2) 텍스트 관련 속성
<div>
<h1>Nice</h1>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
<a href="#">네이버</a>
</div>h1 {
color: rgb(123, 111, 21);
font-size: 80px;
font-style: initial;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 300;
text-decoration: line-through; /* 밑줄 적용 */
text-align: center;
background-color: pink;
ul {list-style: none;}
a {text-decoration: none;}color: 색상의 이름, 헥사 코드, rgb코드 모두 사용 가능font-size: 폰트 크기, px로 지정font-style: 이탤릭체 등 (initial 은 초기값)font-family:
-복수의 서체를 적용 가능, 앞에서부터 적용이 가능한 폰트로 먼저 적용이 된다. (각 브라우저에 맞는 폰트로 적용하기 위해서)
-, 를 사용해 여러 개의 서체를 적용해주면 되며 마지막에는 sans-serif로 입력한다. (sans-serif - 모든 브라우저에 적용가능한 서체)font-weight: 굵기text-decoration:
줄 적용 (line-through - 글자 관통 / underline - 밑줄)text align: 글자 정렬, 해당 태그의 영역 안에서만 움직일 수 있다.list-style: 리스트 형식에서 앞에 메기기 부분 (?)
(3) 백그라운드 속성
<div id="bg"></div>#bg {
width: 900px;
height: 900px;
background-color: yellow;
background-image: url(icon.png);
background-repeat: repeat-x;
background-repeat: no-repeat;
background-position: top left;
}👉 <<img> 와 background image의 차이>
1. background image : 액자처럼 공간의 크기에 맞춰서 이미지가 잘린다. 데코레이션 용으로 사용
2. <img> : 이미지 전체가 공간 크기에 맞춰 들어간다. 정보성을 가진 이미지.
📌 학습내용 중 어려웠던 점
- 내용적으로 어려웠떤 점은 없었지만 CSS의 너무나 다양한 속성값들이 나와서 빨리 익숙해져야 할 것 같다.
📌 해결방법
늘 그렇듯 계속해서 반복하는 것이 학습에 가장 큰 도움이 된다고 생각한다.
📌 학습소감
오늘은 CSS를 통해 시각적으로 꾸밈효과를 주는 것을 배웠다. 확실히 눈에 결과가 보이고 하니 훨씬 재미를 느낄 수 있었다. 또한 Velog에 이제 슬슬 익숙해지나 했는데, 다른 참여자들을 본받아 github도 함께 활용해봐야 겠다.👊👊
