# CSS

seobbang

이 글은 boostcourse의 '웹 UI 개발'을 수강하고 적는 글입니다. 📌 1. CSS 리셋 1) CSS 리셋 소개 웹 표준, 웹 접근성, 시멘틱 마크업, 크로스브라우징 크로스브라우징 : 어떤 웹 브라우저를 써도 화면이 똑같이 나오고, 브라우저에 따라 입력과 사용에 문제가 생기지 않음 단계 1) 브라우저 리셋하기 브라우저마다 태그를 렌더링 하는 방...

bite_apple0821

오늘은 table 레이아웃에 대해서 배워보고 이를 이용해 간단한 장바구니 창을 만들어 보도록 하겠다.기본적인 table 구성은 다음과 같다.table: 이 태그안에서 테이블을 구성한다thead: 표에서 가장 위, 헤드부분 바디부분 구분을 위해 사용하며 기능상 차이는 없

ckdghks922

잊어버리기 쉬운 HTML 내용에 대한 간단한 정리를 해 보았습니다. HTML의 의미: HTML은 웹 페이지를 위한 뼈대와 같다. 중요한 head 태그 사용 빈도가 높아 알아두면 좋은 태그 3.1. Semantic 태그: 가독성 향상

sming0112

이미지 슬라이더의 썸네일의 투명도를 넣어주었다.scss Nesting 처리&의 이해Modal 창 구현.

kimhalin

먼저 npm 명령어 사용을 위해 nodejs를 설치한다.설치되어 있는지 확인하려면?cmd 창을 열고 아래 코드를 입력했을 떄 node 버전이 뜬다면 설치가 되어 있는 경우다.나는 VScode를 사용하고 있어서 VScode 터미널에서 진행했다.만약 그냥 cmd 창에서 진

eunseo814

지금까지 배운 HTML과 CSS를 활용하여 계산기 목업을 만들기(flex 사용하기!)CSS에서 flex를 올바르게 사용하기 위한게 목적이었어서깔끔한 아이폰 디자인을 기본으로 잡았다.큰 레이아웃부터 작은 요소들까지 차례대로 만들어갔다.githubflex를 사용하기로 했었

rmaomina

이전에 만들었던 계산기에 디자인 스타일을 하나 더 만들어 보았습니다. 뉴모피즘은 미니멀리즘 디자인에 공간감을 부여한 디자인이라고 하네요. 종종 봐왔는데 용어가 생소.. 천으로 덮어놓은 듯 부드러운 느낌이 특징...

so960225

웹사이트는 단지 text파일이다브라우저가 웹사이트를 만든다 브라우저는 내가 쓴코드를 이해한다브라우저는 나의 코드를 구현해준다웹사이트는 2개 3개의 언어로 이루어져있다첫번째html두번째 css 마지막은 javascripthtml을 브라우저에게 웹사이트의 content구조

rhddpdms

✨까먹지 말라고 만든 css 메모장!✨

me-hana

조건에 맞는 스타일을 지정해줘야 하는 경우가 있다. 어떻게 해야할까

rimmz

특정 태그에 스타일 속성이 중복되는 경우, CSS는 선택자 우선순위로 속성이 적용된다.!important > inline style > id Selector > class Selector > tag Selector > universal Selector!important

kabonist_89

%로 width,height 값을 표현할때는 바로 상위 태그에 있는 width, height값의 %로 설정이 된다width은 가로길이, height은 세로길이를 의미◆ auto : 기본값, 브라우저가 계산한 너비◆ px : 픽셀◆ % : 부모 요소에 상대적인 너비◆ i

lzns960

Block/Element/Modifier의 약자협업시 CSS 클래스 이름을 짓는 방법추후 SCSS와 함께 사용할 때 편리(Element 소속되어있는 것)어디에 소속되어있는지 바로 알 수 있다. 가장 바깥쪽 상위 요소인 독립적 블록재사용이 가능 \- 재사용을 위해 ma

3hee_11

Layout, Flexbox란?

ollehvelog

전환 효과(transition) > 요소의 전상태와 후상태의 중간 단계를 자연스럽게 만들어 주는 것을 전환 효과 라고 합니다. transition > 단축형 transition-property > 전환 효과를 사용할 속성 이름을 지정합니다. 사용예 tran

ollehvelog

플렉스(정렬) - Container 개요 > display : flex; displdy : inline-flex; display : flex, display : inline-flex display : flex flex를 적용한 부모요소는 블록 속성을 가집니다.

woo_hyun_1

HTML - 뼈대, 골격(Skeleton)CSS - 근육, 피부(Muscle)JavaScript - 뼈대와 근육을 움직이는 뇌의 역할(Brain)HTML은 콘텐츠가 무엇인지에 초점, browser 에게 어떤 content가 있는지를 알려줌(Markup language)

rlaclgns321

html 태그에 따라 기본값이 달라짐 none : 화면에서 사라짐 block : 가로 한 줄 전체를 차지함 (div, h1-h6, p 등의 기본 속성) inline : 텍스트 자체만 차지함, width 적용 불가 inline-block : 기본적으로 inline속성을

rlaclgns321

transition : 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태에서 일어나는 변화를 커스터마이징 transition : background-color linear 2s; MDN_transition transform : 엘리먼트에 회전, 크기