Dev Log #3 - 6월 30일

46820 단어 대구AI스쿨CSS웹프로그래밍개발일지TILhtml

오늘 학습한 내용

✅ 디자인을 담당하는 css요소
✅ html 태그 구조 - 부모, 자식, 형제 관계
✅ 선택자 - type, id, class, attribute 선택자
✅ 캐스케이딩
✅ css의 여러 속성

1. h1에 디자인을 적용하는 방법 크게 3가지

head태그 안에 style태그를 사용해서 디자인을 적용

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		h1 {
			color: red;
		}
	</style>
</head>
<body>

	<h1>Hello Wrold!</h1>

</body>
</html>

태그 안에다가 style속성을 추가해서 다이렉트로 css문법을 작성

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		h1 {
			color: red;
		}
	</style>
</head>
<body>

	<h1 style = "background-color: hotpink;">Hello Wrold!</h1>

</body>
</html>

이 두가지 방식에는 🚨치명적인 단점이 있다.
만약 코드가 2000줄 이상이 넘어가면 하나의 문서 안에 html, css가 같이 있으면 가독성이 떨어진다. 예시를 들면, 책을 구입해서 읽는데 한국어와 영어가 섞여있는 느낌이다. 나중에 유지보수를 할 때에도 불편해진다. 이를 해결하기 위해서는 html문서, css문서 따로 만들어서 두가지 파일을 연동해서 작업한다.

html파일, css파일을 서로 연동해서 작성

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<style>
		h1 {
			color: red;
		}
	</style>

	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<h1 style = "background-color: hotpink;">Hello Wrold!</h1>

</body>
</html>

🚨주의! 두 개의 탭(html,css)중 한 쪽에서만 저장한다고 모두 저장되는 것이 안된다. 양쪽 모두 저장 해주어야 한다.

⭕️ 결과물

2. 부모, 자식, 형제 관계 구조

특징1. 필연적으로 html태그는 부모, 자식, 형제 관계의 구조를 가진다.


<header>
	<ul>
		<li></li>

		<li></li>
			
		<li></li>
	</ul>
</header>
<div></div>
  • header에게 ul은 자식이다.
  • ul에게 header는 부모이다.
  • 각 li들의 관계는 형제 관계이다.(서로 포함하지 않으므로)
  • header와 div 관계도 형제 관계이다.

특징2. 부모가 컬러라는 유전자를 갖고있다면 자식에게 전달, 상속시킬 수 있다.

👉 html태그

<header>
	<h1>header h1</h1>
	<p>header p</p>
</header>

<footer>
	<h1>header h1</h1>
	<p>header p</p>
</footer>

👉 css태그

header {
	color: red;
	
}

⭕️ 결과물

  • header 부모가 빨간색 컬러라는 유전자를 갖고있으므로 자식또한 빨간색 컬러 유전자를 가진다.

🚨 주의점

단, 태생적으로 자기 유전자가 있으면 그 유전자를 따라간다. 즉, 부모가 갖고있는 유전자를 모든 자식이 상속받는 것은 아니다. 애초에 a태그는 파란색 컬러를 유전자로 갖고있다.

👉 html 태그 

	<header>
		<h1>header h1</h1>
		<p>header p</p>
		<a href="#">네이버</a>
	</header>

	<footer>
		<h1>header h1</h1>
		<p>header p</p>
	</footer>

👉 css 태그

header {
	color: red;

}

h1 {
	color:  blue;
}

p {
	color:  green;
}

⭕️ 결과물

특징3. 한 부모의 자식 스타일 값을 지정할 수 있다. (누구 집 자식인지 지정 가능)

👉 html태그

	<header>
		<h1>header h1</h1>
		<p>header p</p>
		<a href="#">네이버</a>
	</header>

	<footer>
		<h1>header h1</h1>
		<p>header p</p>
	</footer>

👉 css태그

header {
	color: red;

}

header h1 {
	color:  blue;
}

header p {
	color:  green;
}

⭕️ 결과물

  • 부모를 명시함으로써 스타일 값을 지정할 수 있다.

  • 같은 색인 경우 묶어서(,를 이용해서) 지정 가능하다.

    👉 css 태그

    header h1,
footer h1 {
		 color:  hotpink;
}

header p,
footer p {
		 color:  orange;
}

    ⭕️ 결과물

3. 선택자

  • 선택자란 css에서 html문서에 접근하는 방식, 특정 영역에 접근하는 방식이다.
  • type, id, class, attribute 선택자 총 4가지 케이스

✔️ type 선택자 : html태그를 기준으로 접근하고자 할 때 사용하는 선택자

👉 html 태그

	<h1>Hello World!</h1>
	<h2 >Nice to Meet you</h2>
	<h3>Welcome</h3>

👉 css 태그

h1 {

	color: red;
}

✔️ id 선택자 : 태그에 고유한 이름을 붙여줄 수 있다.(#을 붙여준다.)

👉 html 태그

	<h1>Hello World!</h1>
	<h2 id="test1" >Nice to Meet you</h2>
	<h3>Welcome</h3>

👉 css 태그

h1{
	color: red;
}

#test1 {
	color: blue;
}

✔️ class 선택자 : 태그에 별명을 붙여줄 수 있다.(.을 붙여준다.)

👉 html 태그

	<h1>Hello World!</h1>
	<h2 id="test1" >Nice to Meet you</h2>
	<h3 class ="test2">Welcome</h3>

👉 css 태그

h1{
	color: red;
}

#test1 {
	color: blue;
}

.test2 {
	color: green;
}

✔️ attribute 선택자 : type의 형태를 기준으로(type의 속성값을 가지고) 서로 디자인을 적용해준다.

👉 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;
}

⭕️ 결과물

4. id선택자와 class선택자의 차이

  • id는 이름이기 때문에 속성값을 하나만 지정해야한다.

  • class는 별명이기 때문에 여러 개의 별명들을 추가할 수 있다.

  • class는 만들어진 별명을 여기저기 언제든 재사용 가능하다. 동일한 클래스명을 하나의 문서에서 여러 번 쓸 수 있다.

  • id는 한 문서 안에서 한 개만 존재해야한다.

👉 html 태그

	<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;
}

⭕️ 결과물

5. id, class 선택자를 활용해서 디자인하기

👉 html 태그

	<header id="intro">
		<div class="container">
			<h2>header h2</h2>
			<p>header p</p>
		</div>
	</header>

	<p>Out p</p>

👉 css 태그

#intro h2 {
	color: red;
}

#intro .container p {
	color:  blue;
}

⭕️ 결과물

6. 캐스케이딩

  • 캐스케이딩은 css코드를 작성할 때 어떠한 디자인을 더 우선적으로 처리할 지 그 우선순위에 영향을 미치는 개념이다.

  • 동일한 속성값을 적용했을 때 어떠한 속성값을 처리할 것인지 판단한다

  • 동일한 선택자를 사용했을 경우에는 나중에 적용된 css 속성에 우선순위가 높다. 아래의 예시 경우 뒤에 나오는 h1(블루)이 적용된다.

👉 html 

<h1>Hello World!</h1>

👉 css

h1 {
	color: red;
}

h1 {
	color: blue;
}

  • type 선택자 < class 선택자 (우선순위)

  • class 선택자 < id 선택자 (우선순위)

  • id 선택자 < style 속성 (우선순위)

  • 즉, style 속성 > id > class > tag

👉 html

<h1 style = "color:gray;" id="color-2" class="color-1">Hello World!</h1>

👉 css

#color-2 {
	color: pink;
}

.color-1 {
	color: green;
}

h1 {
	color: red;
}


h1 {
	color: blue;
}

⭕️ 결과물

7. 캐스캐이딩 응용

  • 좀 더 디테일한 것이 우선순위가 높다.(아래 코드로 예시를 들면, #intro div h1보다 #intro .container h1이 더 더 디테일하다. )

  • 원본 코드를 유지한 상태에서 새로운 css방식을 추가하고 싶을 때 사용한다.

👉 html

	<header id ="intro">
		<div class="container">
			<h1>header h1</h1>
		</div>
	</header>

👉 css

#intro div h1 {
	color:  green;
}


#intro div {
	color: green;
}


#intro h1{
	color: blue;
}

header h1 {
	colror: red;
}


#intro .container h1 {
	color: pink;
}

8. css의 여러 속성

  • px로 하면 고정값이다.
  • 브라우저 크기에 따라 자연스럽게 리사이즈하고싶을 땐, %단위 이용
  • % 단위는 부모의 기준으로 상대값이 측정이 된다.

👉 html

<header>

	<div>
		<h1>Nice</h1>
	</div>

</header>

👉 css

header {
	width: 500px;
}

div {
	width:  100%;
	height:  300px;

	background-color: yellow;
}

  • min-width, max-width는 %를 이용한 기준 안에서 사용이 된다.

  • max-width는 상한선, min-widht는 하한선

  • 테두리 선 지정: border: solid 10px red;

  • 테두리 라운드 지정: border-radius: 50px;

  • 폰트가 세가지 서체가 동시에 있다면 앞에서부터 적용이 가능한 폰트로 먼저 적용이 된다. 브라우저마다 사용 할 수 있는 폰트가 정해져있다.
    font-family: Arial, Times, sans-selif; 일 경우 Arial부터 차례대로 적용

  • 마지막에는 sans-selif로 지정한다. 왜냐하면 모든 브라우저에서 사용가능한 서체이기 때문이다.

  • text-align으로 텍스트 위치를 변경할 수 있지만 범위가 어디서부터 어디까지인지를 알고싶을 땐 예를 들면, background-color: pink;와 같이 범위를 확인하고 사용하는 것이 좋다.

  • opacity: 0.5; 에서 opacity는 투명도를 결정하며 0(가장 투명한)~1(가장 명확한)사이의 값을 가진다.

👉 html


<head>

	<meta charset="utf-8">

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

	<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
	<div>
		<h1>Nice</h1>
		<a href="#">네이버</a>
		<ul>
			<li>메뉴1</li>
			<li>메뉴1</li>
		</ul>
	</div>
    
</body>

👉 css

div {
	width:  100%;
	height:  300px;
	min-width: 600px;
	max-width: 800px;

	border: solid 10px red;
	border-radius: 50px;

	background-color: yellow;

	opacity: 0.5; 
}


h1 {
	color: rgb(123, 111, 21);
	font-size:  80px;
	font-style: initial; //italic은 기울임체, initial은 초기값
	font-family: 'Noto Sans KR', sans-serif; // html에서 head부분에 style link를 따로 지정을 해주어야한다.
	font-weight: 900; // 폰트 굵기
	text-decoration: line-through; // 글자 밑줄, 글자 중간줄
	text-align: center; // 텍스트 배치 

	background-color: pink; // text-align을 사용할 때 확인해야하는 요소 
}

a {
	text-decoration: none; //a태그는 디폴트값으로 밑줄을 가지고 있는에 이 속성을 쓰면 지울 수 있다. 
}

ul {
	list-style: none; //ul태그는 디폴트값으로 동그라미 점 목록을 가지고 있는 데 이 속성을 쓰면 지울 수 있다. 
}

⭕️ 결과물

9. background 속성

👉 html

<div id ="bg"></div>

👉 css

#bg {
	width: 900px;
	height: 900px;
	background-color: yellow;
	background-image: url(icon.png);
	background-repeat: no-repeat;
	background-position: top left;
}

⭕️ 결과물

  • 이미지 태그와 백그라운드에서 이미지사용 차이점

✔️ 첫번째 차이점

  • 이미지 태그 : 비율은 깨지지만 잘리지는 않는다.
  • 백그라운드에서 이미지 사용 : 백그라운드 크기에 따라서 잘린 형태로 나올 수 있다. (액자로 예시를 들면 액자보다 사진이 크면 액자 크기만큼 사진이 보이므로 사진이 잘린 느낌이 든다)

✔️ 두번째 차이점

  • 이미지 태그 : 웹 접근성과 관련하여 이미지 관련 정보를 alt값에 넣어주어야 한다. 정보성을 갖고 있는 이미지 같은 경우는 img태그를 넣어주어야한다.
  • 백그라운드에서 이미지 사용 : decoration 용도로 사용할 때 이용한다.

오늘의 학습 후기(어려웠던 점, 개선할 점)

오늘은 CSS에 대해서 알아보는 시간을 가졌다.📗 오늘 수업의 핵심 단어를 말하면 우선순위와 차이점인 것 같다. 동일한 태그여도 선택자에 따라, 부모-자식간의 요소에 따라 우선순위가 달라짐을 웹 브라우저를 통해 확인할 수 있었다. 디자인적인 요소를 더하는 CSS는 시각적인 효과를 통해 더 많은 정보를 담아서 알려주는 역할을 하기 때문에 그 쓰임새에 더 자세히 알아야겠다는 생각이 들었다⭐️ 오늘 어려웠던 점은 크게 없었고 html태그 부모 자식 요소와 각 선택자의 차이점, 캐스케이딩, css 속성과 요소에 대해 더 복습하고 마무리하는 시간을 가져야겠다😊

백준 14467 소가 길을 건너간 이유(구현)
[BaekJoon] 10989 수 정렬하기 (java)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage