파이톨치

[웹 프로그래밍] CSS 본문

대학수업

[웹 프로그래밍] CSS

파이톨치 2022. 9. 15. 23:05
728x90

CSS

html과 마찬가지로 CSS도 무언가의 약자이다. Cascade Style Sheet 의 약어이다.

여기서 궁금한 점은 Cascade가 무엇인지이다. 어디서 본 것 같기도 하고 처음 보는 것 같기도 한 단어였다.

 

Cascade는 폭포라는 뜻인데, 여기서 의미하는 것은 다음과 같다.

동일 html element에 대하여 여러가지 스타일이 적용될 때 마지막에 적용된 스타일을 적용한다는 의미이다. 

 

CSS는 html의 스타일링을 담당하는 언어이다.

화면에 보여줄 때 html 요소들을 변형하고 디자인 하는 것은 CSS가 하는 것들이다.

 

CSS 문법은 다음과 같다.

 

이를 보기 좋게 표현하면 이런식으로도 쓸 수 있다.

 

h1 {
    color:green;
    font-size: 36px;
    text-align: center;
}

 

# Web 페이지에 CSS를 적용하는 방법 1

<body>
 <p style="color:green; font-size:2em">
 	this is a sample text used
    to test the applied styled
    int this HTML document.
 </p>
</body>

 

this is a sample text used to test the applied styled int this HTML document.

 

다음과 같은 형식으로 나오게 된다.

 

아니면 위에서 봤던 것처럼 예쁘게 해도 된다.

 

# Web 페이지에 CSS를 적용하는 방법 2

<head>
 <meta charset="utf-8" />
 <title>CSS Course</title>
 <style>
 	p {
    	color: green;
        font-size: 2em;
       }
</style>
<body>
	<p>
    	this is a sample text used
        to test the applied styles
        in this HTML document.
    </p>
</body>

이걸 여기다 써버리면 다른 본문 구조도 깨져버리기 때문에 직접 보여줄 수는 없지만 위와 동일한 결과가 나오게 된다.

 

이렇게 쓰면 모든 본문 구조가 바뀌어 버리기 때문에 사용할 때는 주의해야한다.

 

# Web 페이지에 CSS를 적용하는 방법 3

이 방법은 별도의 CSS file을 만들어 적용하는 방식으로 가장 보편적으로 쓰는 방식이다.

 

<head> 
	<meta charset="utf-8" />
    <title>CSS Course</title>
    <link rel="stylesheet" href="myStyle.css" />
</head>
<body>
	<p>
    	this is a sample text used
        to test the applied styles
        in this HTML document.
    </p>
</body>

이러한 구조의 html 파일을 하나 만들고 myStyle.css 라는 파일을 별도로 만들어서 서로 연결 시켜주면 된다.

myStyle.css 내용은 다음과 같다.

p {
	color:green;
    font-size: 2em;
}

# CSS Selector

Selector 는 CSS 룰을 적용할 html elements 와 관련되고, 선언 앞 부분에 사용한다.

여러 selector 를 하나의 선언에 동시에 적용이 가능하다. 하지만 이게 쓰다보면 불편해서 id를 정의해주기도 한다.

 

이는 jQuery, react 등에서 쓰인다. 

 

# Simle Selectors

셀렉터에는 종류가 있다. 그 중에서 많이 쓰이고 간단한 셀렉터를 알려주려고 한다. 

 

# All Selector : * 기호를 사용한다. 전체 html 요소를 선택한다.

* {
 color: red;
 background-color: lightblue;
}

# Element Selector : Tag name으로 선택한다.

h1 {
color:red;
}

# Id Selector : <p id = "mygreeting">hello, css</p> 와 같은 형식으로 id를 지정해서 single element 가 선택된다.

#name {
 color: blue;
}

<div id="name">hello world</div>

값을 선택할 때는 # 기호를 사용해준다.

 

# Class Selector : 태그의 클래스 요서의 값으로 선택해서 여러 요소를 선택할 수 있다. 예를 들어 <p class = "big">hello, css</p> 와 같은 형식으로 사용한다.

<style>
.big-font{font-sizeL larger;}
.green-bg{background-color:green;}
.white-text{color:white;}
.bold-text{font-weight:bold;}
</style>

<body>
<div class="big-font green-bg white-text">
<p>
First paragraph
</p>
<p class = "bold-text">
Second paragraph.
</p>
<div>
</body>

얜 .으로 사용해준다. 클래스가 같으면 같이 변한다.

 

# Combinator Selectors

<body>
<ul class="blue-text">
	<li>list item</li>
    <li>second</li>
</ul>
<p class="blue-text"> Firest </p>
<p class="bold-text"> Second </p>
<p class="blue-text bold-text"> Third </p>
p.blue-text {
color:blue;
}

.blue-text { color : fuchsiz; }
.bold-text { font-weight: bold; }
.blue-text.bold-text {font-size:larger; }

ul, p { color:blue; }

 

# CSS Position 

CSS style 을 통해 html element 들의 시작 위치와 크기 변경한다..

 

시작 위치 : top, left, right, bottom 을 사용한다. 

시작 위치 : mergin-left, margin-top, mergin-right, mergin-bottom 을 사용한다.

크기 변경 : width, height를 사용한다.

시작위치 변경 : static, relative, absolute, fixed를 사용한다. 

 

.blue-div {
width: 75px;
height: 75px;
background-color: blue;
position: relative;
top:25px;
left:20px;
}

# Box Model 정의

모든 element 는 mergin, border, padding 을 갖는다.

content 크기 : width, height

border 크기  : border-top, border-right, border-bottom, border-left

margin 크기 : margin-top, margin-right, margin-bottom, margin-left

padding 크기 : padding-top, padding-right, padding-bottom, padding-left

 

div:first-child { 
background-color:blud;
padding-top:10px;
padding-right:20px;
padding-bottom:15px;
padding-left:20px;
}

 

div:first-child { 
background-color:blud;
padding: 10px 20px 15px 20px;
border: 5px deshed red;
margin: 20px 30px 20px 30px;
}

이런 식으로도 됨.

💡Margin Collapse가 뭐임? 

2개의 요소들 간에 마진 겹침 혀낭에 의해서 한 쪽 마진이 없어지는 것을 말한다. 

 

 

728x90
저작자표시

'대학수업' 카테고리의 다른 글

[컴퓨터 구조] 컴퓨터의 성능은 어떻게 체크할까?  (0) 2022.09.23
[컴퓨터 구조] 컴퓨터는 어떻게 동작할까?  (1) 2022.09.23
[인공지능] 정보 이용 탐색 (휴리스틱 탐색)  (1) 2022.09.15
[시스템 프로그래밍] Representations in memory, pointers, strings  (0) 2022.09.15
[시스템 프로그래밍] Bits, Bytes, and Integers  (0) 2022.09.14
'대학수업' Related Articles more