working_helen

[ Week 3 ] Style with CSS 본문

교내 수업/Media Computation

[ Week 3 ] Style with CSS

HaeWon_Seo 2024. 3. 8. 19:54

Lecture : Media Computation

Date : week 3, 2024/03/11

Topic : Style with CSS

 

 

1. CSS 코드의 형태 
2. HTML layout 

 

1. CSS 코드의 형태 

1) CSS 코드 구조 

Selector {
	Property : Value;
}

Selector1, Selector2, ,,, {
	Property : Value;
	Property : Value;
}

출처 : https://poiemaweb.com/css3-selector

 

- Selector : CSS style을 적용하는 HTML element를 지정하는 역할 

- 한번에 여러개의 element를 Selector로 사용할 수 있으며, 이 경우 (,)로 구분된 list 형태로 제시 

- Selector 표현 방식은 HTML element에 따라 달라짐 

 

 

 

2) Selector 형태 

① 태그명 그대로 이용 

p {
	font-family: arial;
  	font-size: 50px;
}

 

 

② Class : 여러 element에 중복해서 사용할 수 있는 이름

  • tag 내에 class="class이름" 작성한 후
  • tag.class이름 { } 혹은  .class이름 { } 형태
.one {
	color: grey;
}

<h1 class="one">제목</h1>
<p class="one">문단</p>

 

 

③ ID : 1개의 element에만 고유하게 사용할 수 있는 이름 (각 element도 1개의 ID만 가질 수 있음)

  • tag 내에 id="ID이름" 작성한 후
  • #ID { } 형태
#important {
	font-size: 50px;
   	color: red;
}

<p id="important">뭔가 중요한 문장</p>

 

 

④ 부모/자식 tag를 이용한 Selector (예시) 

- header h1 { } : header 내에 있는 모든 h1에 적용 
- header > h1 { } : header의 직계 자식인 h1에만 적용
- header + h1 { } : header와 가장 근접한 형제 h1에만 적용

 

 

 

 

3) CSS 코드의 위치

- HTML파일 내에서, element의 'style' attribute로 

<div style="background-color: rgb(32,150,50);
        font-family: Arial; color: #E53935">
</div>

 

- HTML 파일 내에서, <head>나 <body> 태그의 자식 태그로

<body>
	<style>
		div {
        	background-color: rgb(21, 101, 192);
        }
	</style>
</body>


- 별도의 CSS 파일을 사용한 후, HTML 파일 내에 link 태그로 첨부 

<head>
	<link rel="stylesheet" type="text/css" href="file이름.css">
</head>

 

 

 

 

 

 

2. HTML layout 

1) Boxes Model

: HTML은 여러 invisible box들로 구성된 화면

출처 :&nbsp;https://medium.com/@isaacgc0596/margin-vs-padding-e46434076684

 

  • Borders : element 외부 테두리, visible box
  • Padding : Borders와 내부 element 간 거리 조절, invisible box
  • Margin : Borders와 외부 element 간 거리 조절, invisible box


※ 거리 단위
- absolute unit : mm, px, pt
- relative unit

  • % : 1/100 of the parent element
  • vw/vh : 1/100 of current width/height of the browser
  • em : length에서 사용하면 현재 element의 font size를 1em으로 했을 때  상대적 크기,
            font-size에서 사용하면 부모 element의 font size를 1em으로 했을 때 상대적 크기
  • rem : length와 font-size 모두 최상위 element의 font size를 1em으로 했을 때 상대적 크기

 

 

 

 

2) Boxes 가로 배치 

- 일반적으로 각 box들이 stack vertically
- horizontally 배열하기 위해선 CSS styling이 필요함 

 

① 방법1 : <div>의 display 속성을 block → inline-block으로 변경 

div {
    display: inline-block;
}

 

 

② 방법2 : 부모 <div>를 생성한 후, 부모 <div>의 display 속성을 block → flex으로 변경 

div.parent {
    dispaly: flex;
    flex-direction: row;
    justify-content: space-between
}



 

 

 

 

 

Reference

https://poiemaweb.com/css3-selector
https://hianna.tistory.com/865

https://jaeworld.github.io/css_em_rem/

 

 

 

 

 

 

'교내 수업 > Media Computation' 카테고리의 다른 글

[ Week 9 ] Processing User Input  (0) 2024.05.01
[ Week 7 ] JS Arrays and Structured Data  (0) 2024.04.19
[ Week 4 ] Java Programming Essentials  (0) 2024.03.17
[ Week 2 ] Structure with HTML  (0) 2024.03.05
'교내 수업/Media Computation' Related Articles more