WEB

[CSS] 박스 모델 (Box Model) : 요소의 크기

박스 모델 박스 모델이란? CSS는 HTML 요소를 화면에 표시하기 위해 요소별로 아래와 같은 박스를 생성한다. 따라서 HTMl 요소의 크기는 컨텐츠의 크기, padding, border, margin에 의해 결정되며, 이를 'CSS 박스 모델(Box Model)'이라고 한다. content : 요소의 콘텐츠가 표시되는 영역 padding : content 영역과 border 사이의 안쪽 영역 border : padding 영역과 margin 사이의 테두리 margin : border 기준으로 바깥쪽 여백

[CSS] CSS 선택자 종류와 우선순위 (작성중)

CSS 선택자 종류 기본 선택자 전체 선택자 (Universal Selector) : * HTML문서 내의 모든 요소(태그)를 선택하는 선택자 보통 margin 또는 padding 값 초기화 등 기본값을 설정할 때 사용한다. 사용 시 문서 내의 모든 요소를 읽어야 하기 때문에 페이지 로딩 속도와 관계가 있어 자주 사용하지 않는 편이 좋다. * { margin: 0; padding: 0; } 타입 선택자 (Type Selector) : Type 기본 선택자로 태그 이름을 그대로 사용하는 선택자 특정 태그로 마크업된 모든 요소를 선택한다. div { color: blue; } 클래스 선택자 (Class Selector) : .Class .기호에 클래스 이름을 붙여서 사용하며 특정 class 속성값을 사용하는..

[CSS] Flexbox : 자식 박스의 방향과 크기 설정

Flexbox란? Flex(Flexible)는 "잘 구부러지는", "유연한"이라는 뜻의 사전적 의미를 가지고 있다. Flexbox layout이란 CSS의 display 속성 중 하나로, 수평적으로만 배치되는 것이 원칙인 일반적인 레이아웃(block, inline 등)과 달리 flexbox layout은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는다. (사이즈를 모르거나 크기가 유동적이어야 하는 상황에서 유용) Flexbox는 작은 크기의 레이아웃이나 모바일 디바이스에 적합하다. (큰 스케일의 레이아웃 : Grid 속성) Flexbox 속성 Flexbox 속성은 속성마다 속성을 지정하는 위치가 다르며 부모 요소에 적용해야 하는 속성과 자식 요소에 적용해야 하는 속성으로 구분할 수 있다. 부모 요소에 적..

[CSS] box-sizing : 박스 크기 방식 설정

box-sizing box-sizing이란 박스 모델의 너비와 높이를 계산하는 방식을 변경하는 속성 box-sizing 사용 이유 width와 height는 기본적으로 컨텐츠 박스 크기에만 적용된다. 따라서 테두리(border) 또는 안쪽 여백(padding)이 있는 경우에는 컨텐츠의 크기 + @로 테두리나 안쪽 여백을 고려해야 하기 때문에 어려움을 느낀다. 여기서 box-sizing의 value를 border-box로 지정하면 width와 height를 테두리, 여백을 포함한 크기로 지정할 수 있다. box-sizing values / box-sizing 속성 값 content-box CSS 표준의 정의한 초기 기본값으로 width와 height 속성이 컨텐츠 영역만 포함한다. selector { bo..

[CSS] CSS란?

CSS란 무엇일까? CSS는 Cascading Style Sheets의 약어로 HTML, XHML, XML과 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. 집을 짓는다고 가정한다면 HTML은 집의 구조(뼈대)를 담당하고, CSS는 인테리어를 담당한다. (개인적인 생각) CSS 필요성 HTML 하나로 문서의 뼈대와 스타일을 같이 한다면 1개의 디자인 변경이 이루어질 경우 관련된 모든 문서를 전부 수정해야 하는 번거로움이 있다. 따라서 구조와 디자인을 분리하기 위해 만들어진 것이 CSS! 태그 내에 style속성 등 디자인에 필요한 요소들이 분리되기 때문에 코드의 가독성이 좋다. 선택자로 묶어 관리하기 때문에 유지보수 용이 CSS 적용방법 CSS를 적용하는 방법은 3가지가 있다. Inline..

[HTML] 시멘틱 태그(Semantic Tag)

Semantic Tag란 HTML5로 넘어오면서 태그의 가장 큰 변화는 시멘틱 태그라고 하는데, 이 때문에 HTML5 웹 페이지를 시멘틱 웹 페이지라고도 한다. Sementic의 사전적 의미는 '의미의', '의미론적인'이라는 뜻을 가진 형용사로 Semantic Tag란 의미가 있는 태그를 의미한다. Semantic Tag 필요성 검색엔진최적화(SEO) : 검색 엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 의미없는 div 또는 span 과 같은 태그는 지양하고, 의미에 맞는 태그들을 사용하는 것이 좋다. 시각장애가 있는 사용자가 스크린 리더를 사용하여 웹 페이지를 탐색하는 데 도움이 되는 표지판으로 사용할 수 있다. 코드의 트리 구조를 쉽게 파악할 수 있으며, 가독성이 좋다..

[HTML] HTML이란?

---------- 공부한 내용 정리 ---------- HTML의 사전적 정의 HTML은 Hyper Text Markup Language의 약자로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어이다. 웹 페이지의 구조를 설계하고 내용을 기술할 때 사용하며 웹 페이지를 위한 마크업 언어라고 할 수 있다. 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타낼 뿐만 아니라 링크, 인용과 같은 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. HTML은 꺽쇠 괄호에 둘러싸인 Tag로 구성되어 있는 HTML 요소 형태로 작성한다. .html 확장자를 사용 HTML의 태그 태그의 사전적 의미는 꼬리표라는 뜻을 가지며 html에서 ..