✔ TODAY
오늘부터는 CSS에 관한 진도가 시작된다.
HTML은 설계도면, CSS는 내부인테리어. 학습내용을 잘 숙지해서, 잘 꾸며보도록 하자.😎
✔ 학습한 내용
CSS시작
- HTML에 CSS을 적용하는 방법
1) HTML의 head에 css문법을 넣는다.
2) 적용할 테그안에 style속성을 만들어 css문법을 직접적으로 적용한다.
- 위의 2 가지 단점 - HTML의 줄이 많아질 경우, HTML과 CSS언어가 혼재되어 가독성이 떨어져 유지보수할 경우 힘들 수 있다.
3) HTML언어로 만든 HTML문서와 CSS언어로 만든 CSS문서. 2개의 문서를 언동한다.
- HTML에서 외부에 있는 CSS문서를 가지고 오는 방법.
-HTML head부분에서 link태그를 아래와 같은 코드를 입력한다.
<link rel="stylesheet" type="text/css" href="css주소">위에서 언급한 가독성의 문제로
'3)'의 방법으로 작성하는 것을 추천!
💥주의
css문법 '{속성: 속성값;}
;를 안하면 다음의 css코드가 적용이 안될 수 가 있다
💖Tip
css의 주석처리는 c언어 주석처리와 같다. 주석안의 주석은 안됨
- CSS가 우선 적용되는 순위
<header>
<ul>
<li></li>
</ul>
</header>
<div></div>부모자식관계 : 태그가 다른 태그를 품을 수 밖에 없는 구조
위의 소스코드 구조를 예를 들면,
header(부모태그)>ul(자식태그)
li(각각 독립적 li끼리는 형제관계)
div 와 header는 독립적인관계, 형제관계라고 볼 수 있다.
CSS를 유전자로 비유하자면,
부모의 유전(css)가 자식에게 전달된다
<header>
<h1>header h1</h1>
<p> header p1</p>
</header>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer>header{color: red;} header밑의 자식태그 색도 레드
footer{color: blue;} footer밑의 자식태그 색도블루아래와 같은 이유 등으로 모든 자식에게 전달되는 것이 아님.
- 자식태그가 가지고 있는 유전자(css)가 상속된것 보다 우선적용
header{color: red;}
h1{color: blue;} 이런경우, header의 h1 파랑색- a태그와 같이 애초에 태생적으로 가지고 있는 유전자(파랑색)을 우선적용
선택자
css에서 html 특정영역에 접근한는 방법
<h1>hello world</h1> (1)타입
<h2 id="test1" >nice to meet you</h2> (2)id
<h3 class="test2">welcome</h3> (3)class
<input type="text" placeholder="이름" >
<input type="password" placeholder="비밀번호"
(4)속성 h1{color: red;} ...(1)
#test1{color: blue;} ...(2)
.test2{color: green;}...(3)
input[type="text"]{border: solid 10px red;}
input[type="password"]{border: solid 10px blue;}
...(4)id(이름)
- 동일한 아이디의 값은 한 문서에 하나(여기저기에서 사용안됨)
한 태그에 2개의 값을 넣으면 오류가 일어나서 안됨
class(별명)
- (테그에서 별명을 붙이는 것) 속성값으로 여러 별명을 지을 수 가 있음/동일한 클래스명을 여기저기에서 사용가능
동일한 태그들 중에 각자 다른 디자인을 적용하고 싶을 때, id와 class를 사용.
(타입의 경우 공통적요으로 다르게 적용할 수 가 없음)
케스케이팅
어떤 디자인에 우선적용할지에 관한 것.
동일한 속성값으로 했을때,
타입<class<id<style 순으로 우선 적용이 되며,
같은 선택자내에서도 더 디테일한 쪽에 우선 적용이 된다.
<header id="intro">
<div class="container">
<h1>header h1 </h1>
</div>
</header>#intro div h1{color: green;} 하위 id코드보다 더 구체적
#intro h1{color: blue;} id
header h1{color: red;} 타입위의 css일 수록 우선적용된다
원본코딩에서 새로운 css를 덮어씌우고 싶을때 사용
속성(1)
- 공간에 대한것
div{ width: 100%; 넓이
height: 300px; 높이
min-width/height: 600px; 최소넓이/높이값
max-height/width: 800px; 최대높이/넓이값
border: solid 10px red; 테두리: 선종류
border-radius: 50px; 공간 꼭지곡선
background-color: yellow; 공간 색상
opacity: 0.5;} 투명도(0~1)속성
- 공간만들기
- 투명으로 나오기때문에 백그라운드칼라설정하는 것이 입문에는 좋다
- px로 설정하면 크기가 고정(고정값)된다.
- %로 하면 브라우저 크기(기준-부모인 바디테그 즉 브라우저/부모테그가 헤더(헤더의 크기를 사전에 설정)에 맞게 설정=부모태그를 기준으로 츠정이 된다)에 비래하여 공간이 리사이즈된다.(가변값변화)
- 문자에 관한것
h1{ color: #eaeaea; 글자색상
font-size: 80px; 글자크기
font-style: initial; 글자스타일: 일반
font-family: 'Noto Sans KR', sans-serif; 폰트단체지정
font-weight: 100; 글자넓이
text-decoration: line-through; 글자선(취소선,밑줄)
text-align: center; 글자위치
background-color: pink; 글자배경색상(h1영역)
}-
폰트페밀리 sans-serif로 마무리하기! (대부분의 브라우저에서 사용가능한 서체이기 때문.
- 이미지에 관한것
#bg{ width: 900px; 이미지 넓이(액자)
height: 900px; 이미지 높이(액자)
background-color: yellow; 이미지배경색
background-image: url(icon.png); 이미지삽입
background-repeat: no-repeat; x-x축에만,y-y축에만, no 1개
background-position: top left; 이미지위치
}이미지 넣는 법 html vs css
-
Html
이미지는 짤리지 않음(비율이 깨져도....) -
css
공간이 이미지보다 작으면 이미지가 짤리게 나옴.(액자에서는 잘린형태로 보임)
액자틀 안에 박그라운드 이미지를 사용해서 이미지는 넣는 개념.
EX ) 네이버로고
- 로고는 대표아이콘 > 정보성을 가지고 있다.
Html - img>alt-웹접근성
css - 시각장애인리드기가는 읽은 수 없는 정보
이미지가 정보성을 가지고 있냐없냐 따라 이미지의 성 다르게 꾸민다.
✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들
- html과 css를 동시에 창을 열고 해야되서 버거웠다
- 선택자에 대한 개념이 조금 헷갈렸다
✔ 해결방법 작성
- 연습많이해서 익숙해지거나...
- 동생에게 사전양해를 구해 테스크탑을 빌리자
- 일일히 코딩을 입력하며 개념을 익혔다. 추가 필요한 정보는 교재로 획득함.
✔ 학습 소감
오늘은 몸이 너무 안 좋아서 수업에 집중하기가 힘들었다. 하지만 다행히 기본개념이라 기본에만 집중학습할 수 있었다. 컨디션회복에 집중해서 내일 부족한 부분을 채우자.
velog보다 취업걱정에 밤샘...ㅜ밤샘김에 github연동하기 위해서 git설치를 하다가 'config--global'이 정의가 안된다고 못했다... 오늘 밤에는 git과 notion, velog를 설정하자.
