# html css

33개의 포스트
post-thumbnail

REACT_심화_review_1편

2021-07-03 컴포넌트를 쪼개는 방법 컴포넌트를 쪼개는 방법은 크게 두 분류로 나뉜다. 1) view만 생각하는 법. 2) 데이터를 기준으로 생각하는 법. 1번 view만 생각하는 것 같은 경우는 기획서를 보면서(와이어프레임 등) 비슷하게 생긴 구조끼리 묶는

2021년 7월 7일
·
0개의 댓글
post-thumbnail

REACT_심화_review_0편

2021-07-02 var와 let, const의 차이점: 1) var는 ES5버전까지 사용했던 변수 생성 키워드이다. 같은 변수를 여러가지 만들어도 되고, 심지어는 생략도 가능하다. 2) var는 함수레벨 스코프를 가진다. -> 스코프란? -> 이 변수를 어디까지

2021년 7월 4일
·
0개의 댓글
post-thumbnail

HangHae99_fourthweek_Review

React 기본 주차가 시작되었다.5주차 내용의 인강 수강과, 딕셔너리 사전을 redux를 사용해서 store의 db와 연결시켜서 서버리스 형태로 firebase를 사용해서 정적 웹 사이트 호스팅 - 온라인 배포까지 하는 형태의 과제를 진행했다.인강에서 5주동안 배운

2021년 7월 3일
·
0개의 댓글
post-thumbnail

[HTML & CSS] styled-components 정리, 사용법 & 특징

styled-components는 CSS를 JavaScript에서 분리하지 않고직접적인 컴포넌트로 활용할 수 있는 스타일링 프레임워크입니다.React의 Component와 비슷하게 따로 CSS 스타일을 지정하여사용할 수 있기 때문에 스타일의 재사용성이 높아지게 됩니다.

2021년 6월 24일
·
0개의 댓글
post-thumbnail

[HTML & CSS] DOCTYPE 과 표준, 비표준 모드 / Standard, Quirks mode

Document Type의 약자로, HTML 이 어떤 버전으로 작성이 되었는지 선언하여 웹 브라우저가 올바르게 작동하는 역할을 합니다.만약 문서의 상위에 DOCTYPE 태그를 생략하면 웹 브라우저가 표준 모드(Standards mode)가 아니라비표준 모드(Quirks

2021년 6월 24일
·
0개의 댓글
post-thumbnail

[HTML & CSS] 시맨틱 태그가 뭔데? 🤔 / Semantic Tag

시맨틱(Semantic)이란? "의미의, 의미론적인" 의 뜻을 가지며,시맨틱 마크업은 일반적으로 <div> 태그 및 기본 태그로 구성된 마크업대신시맨틱 태그를 통해 HTML 태그로 의미를 잘 전달할 수 있도록 문서를 작성하는 것을 의미합니다.시맨틱 태그에는 100

2021년 6월 24일
·
0개의 댓글
post-thumbnail

[HTML/CSS] Flex / flex-direction, justify-content, align-items

flex, flexbox 레이아웃을 사용하기 위해선 아래와 같은 CSS 속성을 적용해야합니다.flex 레이아웃에서 메인 축(Main Axis)는 가로축이 되고 수직축 또는 교차축(Cross Axis)는 메인 축에 수직 이 됩니다.축의 방향을 결정하기 위해 속성을 이용합

2021년 6월 24일
·
0개의 댓글
post-thumbnail

[HTML & CSS] box-sizing

box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.content-box는 CSS 박스 크기 결정법의 기본값이며너비를 100px로 설정하면 콘텐츠 영역이 100px 너비를 가지게 됩니다.border-box는 크기를 조절할 때 쉽습니다.너비를 10

2021년 6월 24일
·
0개의 댓글
post-thumbnail

[HTML & CSS] <meta> / 메타 태그

&lt;head> 태그 사이에 입력하며 웹 페이지의 보이지 않는 정보를 제공합니다.페이지의 요약, 키워드, 작성자, 크롤링 정책 등 수많은 정보를 제공합니다.http-equiv = "항목명"브라우저가 서버에 명령을 내리는 속성입니다. name과 같은 역할을 합니다.na

2021년 6월 24일
·
0개의 댓글
post-thumbnail

[HTML & CSS] Grid 태그 기초

CSS 그리드의 두 가지 주요 요소는 wrapper(부모 요소)와 items(자식 요소)입니다.wrapper는 감싸주는 그리드, item들은 그리드 내부의 요소들입니다.!codepenkyoung-jnn/embed/mdyxwBo?defaultTab=html%2Cresul

2021년 6월 24일
·
0개의 댓글
post-thumbnail

[HTML & CSS] 줄바꾸는 기능을 하는 태그 <br> <p>

HTML에서는 엔터를 눌러도 줄 바꾸기가 일어나지 않습니다.또한 스페이스를 여러 번 입력해도 공간을 하나만 인식하게 되어 불편할 수 있습니다.이를 해결하기 위해 &lt;br> &lt;p> 태그가 존재합니다.!codepenhttps&#x3A;//codepen.io/kyo

2021년 6월 24일
·
0개의 댓글
post-thumbnail

Script tag

브라우저의 동작 방식을 간단하게 나열하자면 다음과 같다.html를 읽기 시작하면서 파싱dom 트리 생성render 트리 생성 (dom tree + css 트리 결합)display에 표시브라우저는 html을 파싱하고 dom 트리를 생성한다. 그런데 문제는 중간에 scri

2021년 6월 14일
·
0개의 댓글

레이아웃

포지션 속성은 요소의 위치를 top, bottom, left, right 값과 함께 지정한다. float은 특정 요소를 떠있게, 부유하게, 흐르게 하는 속성이다. 특정 요소를 기본적인 문서의 배치에 흐름에서 벗어나게 함으로써 화면 배치를 자연스럽게 할 수 있다.

2021년 6월 8일
·
0개의 댓글

Semantic Web / Semantic Tag

'의미론적인 웹'이라는 뜻으로 웹페이지를 '의미'있게 구축하여 기계가 이해할 수 있게 만든 웹.콘텐츠의 '의미'를 명확히 하는 태그.ex) header, nav, aside, article, footer...예를 들어 사이트에 이미지를 삽입하는 방법에는 1) img 태

2021년 6월 7일
·
0개의 댓글
post-thumbnail

contents-box와 border-box

contents-box와 border-box의 특성 차이

2021년 5월 29일
·
0개의 댓글
post-thumbnail

CSS 단위 비교 (%, vh, vw, em, rem)

상황에 따라 역동적 특성을 부여하는 CSS 단위

2021년 5월 17일
·
0개의 댓글
post-thumbnail

DOM (Document Object Model)

DOM (Document Object Model)을 통한 HTML 조작

2021년 4월 27일
·
0개의 댓글
post-thumbnail

HTML body 기본적인 구조 및 태그

body 태그를 구상 시 따라야할 시멘틱 구조 및 태그들에 대해 알아보자

2021년 4월 18일
·
0개의 댓글
post-thumbnail

HTML head 구조

HTML head 태그에는 무엇이 있을지 알아보자

2021년 4월 17일
·
0개의 댓글
post-thumbnail

HTML 기본적인 구조

HTML은 기본적인 구조는 형태, 조직, 유연성을 제공하며 건물의 기반처럼 탄탄해야 한다.

2021년 4월 17일
·
0개의 댓글