1) 학습내용
큰 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="ftp-8">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>-
sytle 디자인 적용(HTML + CSS 링크)
-
color: red; (세미콜론 주의)
<link rel="stylesheet" type="text/css" href="style.css">스타일 시트 / 변동될 글자는 css로 구성/ 연동될 파일의 경로
** 변동사항이 있으면 양쪽모두 각각저장
- 링크태그(HTML 과 CSS 간의 연계)
부모자식 관계 디자인 적용법
HTML>
<header>
<h1>header h1</h1>
<p>header p</p>
<a href="#">네이버</a>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer>css>
header {
color: red;
}
header h1,
footer h1 {
color: blue;
}
header p,
footer p {
color: green;
}- , 를 사용하면 양쪽 모두 색상 지정
아이디, 클래스
HTML>
<h1>Hello World</h1>
<h2 id="test1">Nice to meet you</h2>
<h3 class="test2">
Welcome</h3>
<input type="text" placeholder="이름">
<input type="password" placeholder="비밀번호">CSS>
h1 {
color: red;
}
#test1 {
color: blue;
}
.test2 {
color: green;
}
input[type="text"] {
border: solid 10px red;
}
input[type="password"] {
border: solid 10px blue;
}
HTML>
<h2 id="color-1">ID 선택자</h2> --> 잘못된 코드
<h2 id="color-1 font-style-1">ID 선택자</h2>
<h3 class="bg-1 font-size-1">Class 선택자</h3>
<p class="bg-1">Welcome</p>
<h4 id="color-1"></h4>- 동일한 아이디의 속성값은 하나만 있어야 한다
css>
.bg-1 {
background-color: red;
}
.font-size-1 {
font-size: 50px;
}
#color-1 {
color: red;
}
#font-style-1 {
font-style: italic;
}- 클래스는 별명(여러가지 가능), 아이디는 이름(하나만)
- "아이디는 이름이기 때문에 속성값은 하나만 사용해야한다."
css>
#intro h2 {
color: red;
}
header div p {
color: blue;
}
또는
#intro .container p {
color: blue;
}- intro 영역에 있는 것 변경
- header에 div 안에 p를 변경
- #intro 와 .container 도 활용가능
Style 속성
HTML>
<h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>- Style속성( id > class > tag )
Cascading(스타일 우선순위)
CSS>
#intro div h1 { ---> 원본 코드
color: green;
}
#intro h1 {
color: blue;
}
#intro h1 {
color: red;
}
#intro .container h1 {
color: pink;
}
---> 캐스캐이딩 부분, 원본을 지우지 않고 스타일 적용- 원본 코드가 있지만 다른 코드를 적용한다고 강의에서 말함
- 위에서 아래로 흐르는, 상속 또는 종속하는
- 적용된 많은 스타일 중에 어떤 스타일로 표현할지 결정하는 것
상한선, 하한선, 폰트
HTML>
<div>
<h1>Nice</h1>
</div>CSS>
div {
width: 100%;
height: 300px;
min-width: 600px;
max-width: 800px;
border: 10px red;
border-radius: 50px;
background-color: yellow;
}
---> 상한선 하한선 사각형 부분
h1 {
color: rgb(123, 111, 21);
font-size: 80px;
font-style: initial;
font-family: Arial, Times, sans-serif;
font-weight: 300;
text-decoration: line-through;
text-align: right;
}
---> 폰트부분
로고
HTML>
<div id="bg"></div>
<img src="icon.png" width="100px"
height="50px" alt="네이버 로고">- 정보를 갖고 있는 이미지는 img태그를 해줘야한다
CSS>
#bg {
width:256px;
height: 356px;
back-ground-color: yellow;
back-ground-image: url(icon.png);
back-ground-repeat: no-repeat;
back-ground-position: top left;
}- 데코레이션 용도라면 background-image
- 정보라면 img 태그
2) 어려웠던 점
-
부모와 자식 개념(속성 상속 받고 안 받고)
-
HTML과 CSS 간의 링크와 스타일 적용 개념
-
기능은 같으나 다른 태그를 사용하는 css 헷갈리기 시작
3) 해결방법
-
실습을 하면서 눈에 익힘(속성을 받지만 그렇다고 해서 모든 속성을 상속받는 것은 아님, ex) a 태그는 자체적으로 파란 속성)
-
실제 코딩을 통해 눈으로 확인
-
여전히 헷갈리지만 익숙해지도록 반복함
4) 학습소감
-
홈페이지 스타일 적용이 신기한 동시에, 간단해 보이지만 생각보다 수작업이 많이 필요하겠다는 생각이 듦
-
코딩도 코딩이지만 디자인 부분과 연계시 많은 이견다툼이 있을 수밖에 없겠다는 생각이 듦
-
링크와 연계와 활용을 해보면서 많이 헷갈리는 것을 느꼈음
Please be wonderful but don't be so serious, enjoy this journey with the good people!