connecting dots

HTML/CSS 2회차 | CSS 기초, box model, flexbox 본문

Live Class/DevCamp

HTML/CSS 2회차 | CSS 기초, box model, flexbox

dearsuhyun 2024. 6. 14. 23:49

 

https://www.w3.org/TR/css-2023/

 

CSS Snapshot 2023

Abstract This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2023. The primary audience is CSS implementers, not CSS authors, as this definition includes modules by sp

www.w3.org

 

css 선택자

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors

 

CSS 선택자 - CSS: Cascading Style Sheets | MDN

CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.

developer.mozilla.org

 

CSS 기초

div {
  style-name: value;
  style-name: value;
  style-name: value;
}
/* 기본 형태 */

div{
  color: red;
}
.c1.yellow { 
  color: purple;
}
/* 클래스 이름 하나 이상 가능 */
.c2 {
  color: orange;
}
/* class selector */

/* id는 단 하나를 지정할 때 씀 */
#primary-button {
  
}
[id=primary-button] {
  
}

.button {
  width: 300px;
  height: 30px;
  text-align: center;
  /*  정렬  */
  border: 1px solid black;
}
/* button 공통속성 */

.button.yellow {
  background-color: skyblue;
}
.button.red {
  color: black;
  background-color: pink
}
/* button 개별속성 */

.button > span {
  color: black;
}
/* %만 적용됨. button class 밑에 span */

 

의사클래스

active, hover, visited

.button:hover {
  background-color: black;
}

 

 

BOX 모델

html의 모든 요소의 배치와 위치는 box 모델을 기본으로 함

 

Position

flexbox

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

 

Flexbox - Web 개발 학습하기 | MDN

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용

developer.mozilla.org

 

https://flexbox.malven.co/

 

FLEX: A simple visual cheatsheet for flexbox

Learn all about the properties available in flexbox through simple visual examples.

flexbox.malven.co

https://tailwindcss.com/docs/flex

 

 

Flex - Tailwind CSS

Utilities for controlling how flex items both grow and shrink.

tailwindcss.com

 

반응형

'Live Class > DevCamp' 카테고리의 다른 글

JS 6회차 | 토이 프로젝트 설명, import/export, axis, express, app.get, SQL  (0) 2024.06.16
JS 1회차 | 식, 값, 문, 실행(run), 변수를 만드는 방법, 메커니즘, 객체의 특징, 함수를 만드는 방법  (0) 2024.06.15
HTML/CSS 3회차 | CSS 기초, flex, grid, 미디어 쿼리, CSS 네이밍 방법론, css framework  (1) 2024.06.15
HTML/CSS 1회차 | html 기초, DOM  (1) 2024.06.14
JS 2회차 | 함수: 일급함수, 즉시실행함수, 화살표함수, 클래스, 메소드, scope, var/let/const, 복사와 참조  (0) 2024.06.14
'Live Class/DevCamp' Related Articles more