소소한 개발 공부
[CSS] CSS 찍먹해보기1 | style 태그 본문
📝 인프런 [따라하면서 배우는 웹애플리케이션 만들기] - 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 태그된 문장의 색깔을 빨간색으로 적용하라는 의미.
이를 이용해 다음과 같은 예제화면을 만들 수 있다.
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 |