2021. 2. 13. 12:16ㆍProgramming/WEB
CSS
Cascading Style Sheets
css의 구조
selector{
property : value; //Declaration
}
|
selector |
우선순위 |
설정 |
|
#id |
1 |
페이지에서 1회 |
|
.class |
2 |
다회 |
|
element |
3 |
모든 tag |
기본 html tag를 사용하거나, class나 ID를 추가해서 HTML에 design 요소를 넣을 수 있다.
CSS를 적용하는 3가지 방법
- external stylesheet : 가장 일반적인 방법 / html 에 link를 통해 css 파일을 추가한다.
<!-- 현재 폴더의 styles 라는 하위 폴더 안에 -->
<link rel="stylesheet" href="styles/style.css">- internal stylesheet : html <head> 안에 <style></style> tag 내부에 기술
- inline : html tag에 기술 (하지 말것)
Box Model
layout을 잘 구성하기 위해서는 Box model에 대한 이해가 필요하다.
- Block level element : 화면 전체를 사용하는 테그
- inline element : 자신의 content 만큼을 사용하는 tag
display: inline / block 으로 바꿀수 있다. display:none 하면 사라짐.
h1{
border:5px solid red;
padding: 20px;
margin: 20px;
display : block;
width :100px;
}- padding : 테두리와 content 사이의 간격
- margin : 테두리와 테두리 사이의 간격
Box model은 각 아이템의 "부피감" 과 관련이 있고 design에 매우 중요한 요소임.
*개발자도구 활용 ( Ctrl + Shift + C )
여러가지 선택자
a:visited {
color: green;
}- :visited 방문한적이 있는 선택자
- :hover 위에 마우스를 가져다 댔을 때..
selector를 다양하게 사용하는 방법은 실제로 코딩하면서 잘 써먹어야 될 것 같다.
www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements
www.w3schools.com
학습자료
* 하단에 표기된 학습자료 내용 중 일부 내용만을 정리하였습니다.
( 새로 알게 된 내용 , 중요하다고 생각되는 내용 등.)
WEB2 - CSS - 생활코딩
수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 아름답게 디자인
opentutorials.org
MDN Web Docs
MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문
developer.mozilla.org
'Programming > WEB' 카테고리의 다른 글
| [WEB 기초] DAY6 Javascript1 (0) | 2021.02.22 |
|---|---|
| [Web 기초] Day5 HTTP (0) | 2021.02.15 |
| [Web 기초] Day4 CSS layout (0) | 2021.02.14 |
| [Web 기초] Day2 HTML (0) | 2021.02.12 |
| [Web 기초] Day1 Web & INTERNET (0) | 2021.02.11 |