소소한 개발 공부

[CSS] CSS 찍먹해보기1 | style 태그 본문

개발/Web

[CSS] CSS 찍먹해보기1 | style 태그

이내내 2021. 5. 24. 22:52
📝 인프런 [따라하면서 배우는 웹애플리케이션 만들기] - Egoing Lee 를 보고 공부하며 작성한 글입니다.
링크 : 따라하면서 배우는 웹애플리케이션 만들기

 

디자인을 위한 언어 | CSS (Cascading Style Sheet)

HTML을 디자인하기 위해 고안된 Style Sheet 언어이다. 

HTML 문서에 있는 요소에 선택적으로 스타일을 적용할 수 있다.

 

HTML 파일에서 작성할 때, style 태그에서 사용된다.

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

h1 :  선택자(Selector). 주어의 역할.

{color:red} : 서술(Description). 어떤 효과를 선택자에 줄 것인지 서술.

color:red : 속성(Property). 한 서술 안에 여러 개의 속성이 들어갈 수 있으며 각 속성끼리는 ';'(세미콜론)으로 구분.

=> h1 태그된 문장의 색깔을 빨간색으로 적용하라는 의미. 

 

이를 이용해 다음과 같은 예제화면을 만들 수 있다.

:5500은 vscode GoLive로 사이트를 켠 거라 무시한다.. 

ex_css_1.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		h1, h2 {
			color: red; 
			font-size: 10px;
		}
		h2 {
			text-decoration: underline;
		}
		header h1 {
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<header>
		<h1>CSS</h1>
	</header>
	<h2>JavaScript</h2>
	<h3>HTML</h3>
	<h1>PHP</h1>
</body>
</html>

 

style 태그 안에 들어간 선택자-서술 문은 선택자를 꾸며주는 역할을 한다.

 

style 태그 안의 내용은 다음과 같다.

 

1. h1 혹은 h2 태그된 컨텐츠는 글자색 빨강, 글자 크기 10px(픽셀)을 적용한다.

h1, h2 {
    color: red; 
    font-size: 10px;
}

2. h2 태그된 컨텐츠는 밑줄을 적용한다.

h2 {
    text-decoration: underline;
}

3. header 태그되고 h1태그된 컨텐츠는 테두리(굵기 1px, 실선, 빨간색)를 적용한다.

header h1 {
    border: 1px solid red;
}

 

박스모델

Chrome 사용 시(다른 브라우저도 동일한지는 모르겠다.) Ctrl+Shift+I 를 누르면 "개발자 도구"가 나온다.

이는 현재 웹페이지의 html 내용을 보여준다. 

 

우측 하단의 네모난 박스를 박스모델이라 한다.

상자 안부터 밖으로 content - padding - border - margin로 style 태그 내부를 제외한 어느 문장을 클릭해도 볼 수 있다. 

body 안의 문장을 클릭하면 해당 문장이 현재 차지하는 크기를 width * height로 보여주고 padding(컨텐츠와 border 사이 여백)의 값, border 값, margin(창 혹은 다른 항목과 border 사이 여백) 값을 확인 및 수정 가능하다. 

 

ex_css_2.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		#selected {
			border: 1px red solid;
			padding: 30px;
			margin: 50px;
		}
		#extra {
			border: blue 1px solid;
		}
	</style>
</head>
<body>
	<ul>
		<li>html</li>
		<li id="selected">css</li>
		<li id="extra">javascript</li>
	</ul>
</body>
</html>

리스트 태그에 id를 붙여 style 태그에서 특정 지을 수 있다. 또한 각 컨텐츠에 border(테두리), padding(컨텐츠에서 바깥쪽 여백), margin(컨텐츠와 컨텐츠 사이 여백)을 설정할 수 있다.

 

리스트에 붙인 id는 style 태그에서 #id로 선택자로서 사용할 수 있다.

 

 

float

CSS의 효과로 웹페이지의 레이아웃을 디자인할 때 사용하는 속성이다.

사진과 같은 컨텐츠의 배치를 다룬다.

 

이를 이용해 다음과 같은 예제화면을 만들 수 있다.

사진 옆에 글이 작성되어 있음

ex_css_3.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		img {
			border: 1px solid red;
			float: left;
		}
	</style>
</head>
<body>

<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcK2nib%2Fbtq4p3tuyvP%2Fzk0skQGnTFUuFIvct0FU4K%2Fimg.png" />
스크립트의 실행 순서를 개발자가 임의로 설정할 수 있다. 

 

바로 Script Execution Order 를 이용하는 것이다.

 

Edit -> Project Settings... -> Script Execution Order 에서 Apply 버튼 상단의 + 버튼을 눌러 실행 순서를 지정하고자 하는 스크립트를 선택한다.

 

스크립트 옆에 뜨는 숫자(수치)가 작을수록 실행이 빠르다.



출처: https://soso-study.tistory.com/20?category=967915 [소소한 개발 공부]
</body>
</html>

게시글 중 하나인 "[Unity] 스크립트 실행 우선순위 정하기 Script Execution Order"를 예제 페이지로 활용했다.

 

사진을 HTML 문서로 보여주려면 img 태그를 사용한다. 사용은 코드에서와 같이 "<img src="이미지 주소" />"로 작성한다.

 

style 태그 안에...

1. 이미지의 테두리를 그려주기 위해 border 속성을 사용한다. border: 1px solid red;

2. 그림을 왼쪽 정렬로 하고 글자와 나란히 배치하기 위해 float 속성을 사용한다. float: left;

'개발 > Web' 카테고리의 다른 글

[CSS] CSS 찍먹해보기2 | link 태그 - css 파일 링크하기  (0) 2021.05.25
[HTML] HTML 찍먹해보기2 | 웹페이지 만들기  (0) 2021.05.21
[HTML] HTML 찍먹해보기1 | a tag, li tag  (0) 2021.05.16
[Web] Apache, PHP, MySQL 제어판 - Bitnami Manager  (0) 2021.05.15
[Web] 윈도우에 웹서버 설치하기 Bitnami / 웹문서 만들기  (0) 2021.05.14
'개발/Web' Related Articles more