Dev log - 3, CSS 기초 #1

박강산·2021년 6월 30일

대구AI스쿨 - 개발일지

목록 보기

3/44

학습한 내용

태그에 디자인 적용 방법 - 1

head 태그에서 style 태그를 입력
디자인을 적용 할 태그를 입력, 여기서는 h1 태그
중괄호({ }) 안에다가 기입해야함
여기서 color 는 CSS의 속성 : 로 연결, red는 속성 값 ; 로 마무리

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

태그에 디자인 적용 방법 - 2

태그 안에다가 style 이라는 속성을 추가해서, CSS 문법을 기입하는 방법
여기서 background-color 는 CSS의 속성 : 로 연결, pink는 속성 값 ; 로 마무리

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

태그에 디자인 적용 방법 - 3

코드 분량이 많을 경우에 사용하는 방법 (실무에서 주로 사용)
HTML 문서와 확장자가 .css 인 CSS 문서를 따로 만들어서 병합하는 방법
link 태그를 이용, 여기서 rel="stylesheet" 태그는 연동되는 파일의 타입, type="text/css" 태그는 파일의 글자가 CSS 언어로 구성되었다는 의미, href 태그로 파일 경로 설정
CSS 문서에서는 style 태그 방법처럼 작성

HTML 문서

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

CSS 문서

h1 {
	font-size:  80px;
}

HTML, CSS 문서 부가 설명

CSS 문서에서 주석 처리를 할 때에는, /* */ 를 이용

/*
h1 {
	font-size:  80px;
}
*/

태그가 태그를 품는 구조로 되어있음
여기서 header 태그는 부모 태그, ul 태그는 자식 태그
각각의 li 태그는 서로가 독립적인 관계, 형제 태그

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

CSS 문서 스타일 적용법

부모 태그에 스타일을 적용하면, 자식 태그에 그대로 적용됨
단 a 태그와 같이 태생적으로 스타일이 적용되어 있는 태그는 제외

HTML 문서

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

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

CSS 문서

header {
	color: red;
}

부모 태그 스타일 적용 중에, 자식 태그에 직접적으로 스타일을 적용하면, 그 스타일대로 적용됨

CSS 문서

header {
	color: red;
}

h1 {
	color: blue;
}

p {
	color: green;
}

한 부모의 자식 태그에만 스타일을 적용하고 싶으면, 자식 태그 앞에 부모 태그를 입력하면 됨

CSS 문서

header {
	color: red;
}

header h1 {
	color: blue;
}

header p {
	color: green;
}

같은 스타일을 적용하고자 하는 자식 태그가 있을 때는, , 를 사용하면 됨

CSS 문서

header h1,
footer h1 {
	color: blue;
}

header p,
footer p {
	color: green;
}

CSS 선택자

CSS에서 HTML 문서에 접근하는 방법, 특정 영역에 접근하는 방법
4가지 종류(타입, 아이디, 클래스, 어트리뷰트 선택자)
이름이나 별명을 부여하는 선택자는 h 와 같이 같은 태그가 여러번 사용될 때 사용
타입 선택자(한 태그를 선택해서 스타일을 적용)

HTML 문서

<header>
	<body> 	
		<h1>Hello World</h1>
		<h2>Nice to meet you</h2>
		<h3>Welcome</h3>
	</body>
</header>

CSS 문서

header {
	color: red;
}

아이디 선택자(태그에 이름을 부여해서 스타일을 적용)

HTML 문서

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

CSS 문서

h1 {
	color: red;
}

#test1 {
	color: blue;
}

클래스 선택자(태그에 별명을 부여해서 스타일을 적용)

HTML 문서

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

CSS 문서

h1 {
	color: red;
}

#test1 {
	color: blue;
}

.test2 {
	color: green;
}

어트리뷰트 선택자(태그의 속성을 구분하여 스타일 적용)

HTML 문서

<body> 	
	<input type="text" placeholder="이름">
	<input type="password" placeholder="비밀번호">
</body>

CSS 문서 (border: solid 는 테두리 스타일)

input[type="text"] {
	border: solid 10px red;
}

input[type="password"] {
	border: solid 10px blue;
}

아이디 선택자와 클래스 선택자의 차이

태그당 아이디 선택자는 하나의 이름만을, 클래스 선택자는 여러개의 별명을 가질 수 있다.

HTML 문서

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

CSS 문서 (현재 아이디 선택자는 오류로 인식)

.bg-1 {
	background-color: red;
}

.font-size-1 {
	font-size: 50px;
}

#color-1 {
	color: red;
}

#font-style-1 {
	font-style: italic;
}

아이디는 문서를 통틀어서 단 한번만, 클래스는 여러번 사용이 가능함

HTML 문서

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

CSS 문서

#color-1 {
	color: red;
}
.bg-1 {
	background-color: red;
}

.font-size-1 {
	font-size: 50px;
}

아이디와 클래스 선택자를 적용해도 부모-자식 태그 관계 성립됨

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

CSS 캐스케이딩(우선순위 규칙) - 1

style 속성 > 아이디 > 클래스 > 태그
동일한 태그에 여러개의 스타일이 입력되면, 나중에 입력된 스타일이 우선적으로 적용됨

HTML 문서

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

CSS 문서

h1	{
	color: red;
}

h1	{
	color: blue;
}

태그보다 클래스 선택자가 우선순위

HTML 문서

<body> 	
	<h1 class="color-1">Hello World</h1>
</body>

CSS 문서

.color-1 {
	color: green;
}

h1	{
	color: red;
}

h1	{
	color: blue;
}

클래스 선택자보다 아이디 선택자가 우선순위

HTML 문서

<body> 	
	<h1 id="color-2" class="color-1">Hello World</h1>
</body>

CSS 문서

#color-2 {
	color: pink;
}

.color-1 {
	color: green;
}

h1	{
	color: red;
}

h1	{
	color: blue;
}

아이디 선택자보다 style 속성이 우선순위

HTML 문서

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

CSS 문서

#color-2 {
	color: pink;
}

.color-1 {
	color: green;
}

h1	{
	color: red;
}

h1	{
	color: blue;
}

CSS 캐스케이딩(우선순위 규칙) - 2

원본 코드는 유지한 채, 변경하고자 할 때 많이 쓰임
디테일하게 작성할수록 우선순위가 높아짐(경로를 디테일하게)

HTML 문서

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

CSS 문서

#intro div h1 {
	color: green;
}

#intro h1 {
	color: blue;
}

header h1 {
	color: red;
}

CSS 문서(태그보다 클래스 우선순위가 높음)

#intro .container h1 {
	color: pink;
}

#intro div h1 {
	color: green;
}

#intro h1 {
	color: blue;
}

header h1 {
	color: red;
}

CSS 공간 설정

공간 설정(width 는 폭, height 는 높이)
px 픽셀로 크기를 설정 시, 브라우저 크기를 조절해도 크기 유지됨

HTML 문서

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

CSS 문서

div	{
	width: 300px;
	height: 300px;
	background-color: yellow;
}

% 퍼센트로 크기를 설정 시, 브라우저 크기를 조절하면 크기 조절됨

HTML 문서

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

CSS 문서

div	{
	width: 100%;
	height: 300px;
	background-color: yellow;
}

% 퍼센트로 크기를 설정 시, 부모 태그의 크기를 기준으로 조절됨

HTML 문서

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

CSS 문서

header {
	width: 500px;
}

div	{
	width: 100%;
	height: 300px;
	background-color: yellow;
}

% 퍼센트로 크기 설정 시, min-width min-height, max-width max-height 로 크기 제한 가능

HTML 문서

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

CSS 문서

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

	min-width: 600px;
	max-width: 800px;

	background-color: yellow;
}

CSS 테두리 설정

border 는 3가지의 속성 설정 가능, 순서 상관없음
solid 는 선의 종류, 10px 는 선의 굵기, red 는 선의 색상

HTML 문서

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

CSS 문서

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

	min-width: 600px;
	max-width: 800px;

	border: solid 10px red;

	background-color: yellow;
}

테두리를 곡선형으로 할 때는 border-radius 사용

CSS 문서

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

	min-width: 600px;
	max-width: 800px;

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

	background-color: yellow;
}

CSS 폰트 설정

color 를 이용해서 색상 설정(영어, 헥사코드, RGB코드 상관 없음)

HTML 문서

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

CSS 문서

div	{
	background-color: yellow;
}

h1 {
	color: gray;
}

font-size 를 통해 폰트 크기 설정

CSS 문서

div	{
	background-color: yellow;
    font-size: 80px;
}

h1 {
	color: gray;
}

font-style 을 통해 폰트 스타일 설정

CSS 문서

div	{
	background-color: yellow;
}

h1 {
	color: gray;
	font-size: 80px;
	font-style: italic;
}

font-family 을 통해 폰트 서체 설정(복수 설정 가능)
먼저 입력된 서체로 적용되고, 지원하지 않으면 다음 서체로 적용됨
보통 sans-serif 를 마지막으로 입력, 대부분의 브라우저가 지원됨

CSS 문서

div	{
	background-color: yellow;
}

h1 {
	color: gray;
	font-size: 80px;
	font-style: italic;
	font-family: Arial, Times, sans-serif;
}

인터넷(구글 폰트 등)을 통해 서체 설정 가능
사이트에서 제공하는 코드를 가져오면 됨

HTML 문서

<head>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<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>

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

CSS 문서

div	{
	background-color: yellow;
}

h1 {
	color: gray;
	font-size: 80px;
	font-style: italic;
	font-family: 'Noto Sans KR', sans-serif;
}

font-weight 로 폰트 굵기 설정

CSS 문서

div	{
	background-color: yellow;
}

h1 {
	color: gray;
	font-size: 80px;
	font-style: italic;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
}

text-decoration 으로 폰트 굵기 설정
underline 으로 밑줄, line-through 로 중간줄
a 코드의 밑줄을 제거하고 싶을 때, none 으로 설정

CSS 문서

div	{
	background-color: yellow;
}

h1 {
	color: gray;
	font-size: 80px;
	font-style: italic;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
    text-decoration: underline;
}

HTML 문서

<div>
	<a href="#">네이버</a>
</div>

CSS 문서

div	{
	background-color: yellow;
}

a {
	text-decoration: none;
}

text-align 으로 정렬 설정(left, center, right)

CSS 문서

div	{
	background-color: yellow;
}

h1 {
	color: gray;
	font-size: 80px;
	font-style: italic;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
    text-decoration: underline;
    text-align: center;
}

list-style 을 통해, 말머리표 설정
ul 이나oi 의 점이나 숫자를 제거할 때는 none 설정

HTML 문서

<div>		 
	<ul>
		<li>메뉴1</li>
		<li>메뉴2</li>
	</ul>
</div>

CSS 문서

div	{
	background-color: yellow;
}

ul {
	list-style: none;
}

opacity 를 통해, 투명도 설정
1 로 갈수록 선명해짐

HTML 문서

<div>		 
	<h1>Nice</h1>
	<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: gray;
	font-size: 80px;
	font-style: italic;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	text-decoration: line-through;
	text-align: center;
}

ul {
	list-style: none;
}

CSS 배경 설정

background-color 로 색상 설정

HTML 문서

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

CSS 문서

#bg  {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

background-image 로 이미지 입력 가능
url 로 경로 설정
공간보다 이미지가 작으면, 반복적으로 공간을 메꿈

CSS 문서

#bg  {
	width: 300px;
	height: 300px;
	background-color: yellow;
	background-image: url(icon.png);
}

background-repeat 로 반복적으로 공간을 메꾸는 현상을 제어함
repeat-x 는 X축으로만 반복, repeat-y 는 Y축으로만 반복, no-repeat 는 반복 효과 제거

CSS 문서

#bg  {
	width: 300px;
	height: 300px;
	background-color: yellow;
	background-image: url(icon.png);
	background-repeat: repeat-x;
}

background-position 으로 이미지 위치 설정
중(center), 오(right), 왼(left), 위(top), 아래(bottom)
오른쪽 상단(right bottom) 등 으로도 배치 가능

CSS 문서

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

이미지 태그와 CSS 이미지 사용 차이

이미지 태그는 비율이 망가지긴 해도 이미지 전체를 불러옴
CSS는 지정된 크기 보다 이미지가 크면 잘린 부분을 불러옴
이미지 태그는 정보를 담을 수 있는 이미지, alt 태그 이용

HTML 문서

<div id="bg"></div>
<img src="icon.png" width="100px" height="50px" alt="네이버 로고">

CSS 문서

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

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

오늘 배운 CSS 문법들이 많아서, 내가 활용할 수 있도록 복습해야됨
어트리뷰트 선택자는 우선순위에 어떤식으로 활용되는지 찾아봐야함

해결방법

인터넷 검색을 통해 어트리뷰트 선택자는 style 직접 설정이 아닌, 태그이므로, 다른 아이디나 클래스 선택자보다 우선순위가 낮다는 것을 알게됨.

학습 소감

오늘은 처음으로 CSS 문법을 배웠음. 한번에 많은 CSS 문법들을 학습 하다보니, 오늘 학습한 문법들 일부는 머릿속에 제대로 각인되지 않았기 때문에, 다시 한번 정리한 것들을 보아 하나하나 머릿 속으로 정리해봐야 겠음.
HTML 태그가 아닌, CSS 문법들을 배우니 웹을 디자인 하는 것에 대해 조금은 더 알게된 느낌임.

박강산

안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.

Dev log - 3, CSS 기초 #1

대구AI스쿨 - 개발일지

학습한 내용

태그에 디자인 적용 방법 - 1

태그에 디자인 적용 방법 - 2

태그에 디자인 적용 방법 - 3

HTML, CSS 문서 부가 설명

CSS 문서 스타일 적용법

CSS 선택자

아이디 선택자와 클래스 선택자의 차이

CSS 캐스케이딩(우선순위 규칙) - 1

CSS 캐스케이딩(우선순위 규칙) - 2

CSS 공간 설정

CSS 테두리 설정

CSS 폰트 설정

CSS 배경 설정

이미지 태그와 CSS 이미지 사용 차이

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

해결방법

학습 소감

Dev log - 2, HTML 기초 #2

Dev log - 4, CSS 기초 #2

0개의 댓글