6월 30일 Velog

학습한 내용

CSS 적용법

(1) head > style > h1{}

<head>
	<meta charset="utf-8">

	<style>
		h1 {
			color: red;
		}
	</style>	
</head>

<body>

	<h1>Hello World</h1>
    
</body>

(2) html 안에 style=“” 적용

<h1 style="background-color: pink;">Hello World</h1>

CSS 코드는 중괄호{} 안에 입력해야 한다.
(2)은 추천하지 않는 방법

(3) link
[html]

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

</head>

<body>
	<h1 style="background-color: pink;">Hello World</h1>
</body>

[css]

h1{
	font-size: 80px;
}

css 파일과 html을 연결하는 태그, css는 단독으로 html에 적용할 수 없다
rel(링크 태그로 연결되는 파일의 타입) = “stylesheet”(디자인)
type(연동되는 파일의 글자 타입)
href(연동되는 파일의 경로)
(3) link 태그를 실무에서 많이 사용한다
View-Layout-Column2 : 화면 분할
CSS 주석 : /* */

태그의 상속

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

	<div></div>

부모/자식 태그(header>ul>li), 형제 태그(header-div)

[html]

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

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

[css]

header{
	color: red;
}

 h1{
	color: blue;
}

p {
	color: green;
}
 
 header h1, 
 header p {
	color: yellow;
}

a 태그는 그 자체로 파란색을 나타낸다 (부모 태그의 영향 받지 않음)
부모를 명시하면(header h1/header p) 특정 태그에만 적용 가능하다
쉼표 사용하여 묶어줄 수 있다 : header h1, header p{}

선택자

(1)
[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;
}

타입 선택자 : h1{}, html 태그를 기준으로 접근
id 선택자 : <h2 id="test1">Nice to meet you</h2> + #test1{}
class 선택자 : <h3 class="test2">Welcome</h3> + .test2 {}
속성 선택자 : input의 type 기준 [type=""] 으로 설정

(2)
[html]

	<h2 id="color-1">ID 선택자</h2>
	<h3 class="bg-1 font-size-1">Class 선택자</h3>

	<p class="bg-1">Welcome</p>
	<h4 id="color-2"></h4>

[css]

.bg-1{
	background-color: red;
}
.font-size-1{
	font-size: 50px;
}
#color-1{
	color: red;
}

※ id와 class의 차이점

id : 속성값으로 여러 가지 이름을 정할 수 없다, 한 문서에 속성값이 한 곳에 있어야 한다
class : 속성값으로 여러 가지 이름을 정할 수 있다 ( <h3 class="bg-1 font-size-1">), 한 문서에 속성값이 여러 곳에 있어도 된다.

선택자의 다양한 표현

[html]

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

	<p>Out p</p>

[css]

header div h2 {
	color: red;
}
#intro .container p {
	color: blue;
}

header h2 = #intro h2
header p = heder div p = header .container p = #intro .container p

Cascading

(1) 선택자의 우선순위
[html]

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

[css]

#color-2{
	color: yellow;
}
.color-1{
	color: green;
}
.color-1{
	color: hotpink;
}
h1 {
	color: red;
}
h1 {
	color: blue;
}

우선순위 : 태그(h1) < class < id < html 내의 style 속성
-> red < blue < green < hotpink < yellow < gray
동일한 선택자를 사용했을 때 아래쪽에 있을수록 우선 순위가 높다

(2) 예제
[html]

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

[css]

#intro .container h1{
	color: pink;
}
#intro div h1 {
	color: green;
}
#intro h1 {
	color: blue;
}
header h1 {
	color: red;
}

우선순위 : header h1 < #intro h1 < #intro div h1 < #intro .container h1
디테일 할수록 우선순위가 더 높다

※ 원본 코드를 유지하고 새로운 CSS 코드로 디자인을 변경하고 싶을 때
-> 캐스캐이딩 사용

CSS의 속성

[html]

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

[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: black;
	font-size: 80px;
	font-style: italic;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	text-decoration: underline;
	text-align: center;

	background-color: pink;
}

a {
	text-decoration: none;
}
ul {
	list-style: none;
}

공간 만들기 : width(가로), height(세로) ＋ 배경색(background-color)을 넣어주면 좋다
width/height : 300px (공간 고정값), 100% (공간 가변값, 기준 : 부모 태그가 차지하는 브라우저 크기)
min-width/max-width : %로 지정된 width 안에서 사용
border: solid 10px red; : 테두리 만들기, 속성값 3개(선의 종류/굵기/색)
border-radius: 50px; : 테두리 라운드
opacity : 투명도
color의 속성값 종류 : 색상 이름/색상코드(#eaeaea)/rgb(123, 111, 21)
font-size : 글씨 크키
font-style : 기울임(italic)/default(initial)
font-family : 서체
font-family: Arial, Times, sans-serif; : 사용가능한 폰트가 왼쪽부터 우선적으로 사용됨
※ 마지막은 sans-serif : 모든 브라우저에서 사용 가능하기 때문에

font-weight : 글씨 크기
text-decoration : 밑줄(underline), 글자 중간에 글(line-through)
text-align: left/center/right, 정렬
※ text-align은 h1 내에서만 움직인다. -> background-color: pink; 로 확인
a 태그는 그 자체로 밑줄을 가지고 있다.
-> a 태그의 언더바를 제거하고 싶다 : text-decoration: none;
ul(li) 태그는 태생적으로 .을 가지고 있는데 없애고 싶다 : list-style: none;

※ 구글 폰트 사용법 https://fonts.google.com/
-> 폰트 선택
-> [link] 복사 후 html의 head에 붙여넣기
-> 링크 아래 font-family : ~~ css에 속성으로 붙여넣기

백그라운드 속성

[html]

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

	<img src="icon.png" width="100px" height="50px" alt="로고">

[css]

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

공간보다 이미지의 크기가 작다면 이미지가 반복적으로 나타남
background-repeat : repeat-x/repeat-y/repeat/no-repeat, 반복 효과 제어(x축으로만, y축으로만, x&y 축 둘 다 반복, 반복 안 함)
background-position : left(왼쪽 중앙)/right/top(상단 중앙)/bottom/center(정중앙)/right top/right bottom/left top/left bottom
이미지보다 공간의 크기가 작다면 이미지(background-image)는 짤린다.
-> width: 100px, height : 100px 로 바꿨을 때
※ html의 img 태그는 공간이 작아도 깨지지 않고 비율만 줄어든다.
※ img는 정보성을 가지고 있다(alt 속성)/background-image는 데코용

학습한 내용 중 어려웠던 점 또는 해결 못한 것들

CSS와 html 둘 다 연결하여 코드를 작성하는 것이 복잡했고 여러 코드에서 변화하는 디자인을 기록하는 것이 쉽지 않았다.

해결 방법 작성

수업을 반복해서 들었고 눈으로 보고 그치기 보단 타이핑으로 정리해서 확실하게 이해하기 위해서 노력했다.

학습 소감

어제 일지에서 얼른 CSS를 배워보고 싶다고 했는데 확실히 html만 공부했을 때보단 시각적 효과가 컸지만 그만큼 어려웠다. 내일 더 발전할 수 있길!

Author And Source

이 문제에 관하여(6월 30일 Velog), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ryuyoungseo8232/630Velog

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

6월 30일 Velog

CSS 적용법

태그의 상속

선택자

선택자의 다양한 표현

Cascading

CSS의 속성

백그라운드 속성

Author And Source

좋은 웹페이지 즐겨찾기