# display

157개의 포스트
post-thumbnail

Front-end 국비지원 #013일

블록요소의 종류dt, dd, ul, li, ol, dl, div, p, h1, h2, h3, h4, h5, h6인라인요소의 종류a, img, span, srong, input, textarea, select\*인라인은 width , height , padding-top

2022년 11월 1일
·
0개의 댓글
·
post-thumbnail

[CSS] 레이아웃 display

레이아웃 각 요소의 위치가 웹 사이트의 목적에 맞게 배치된/ 각각의 요소를 목적에 맞게 배치하는 것 HTML 문서는 기본적인 스타일을 가지고 있어서 HTML 문서가 갖는 기본 스타일이 레이아웃을 설정하는 데에 방해가 됨 → 초기화 꼭 해 주기 와이어프레임 웹 또는 애

2022년 10월 29일
·
0개의 댓글
·
post-thumbnail

CSS | Display : Flex & 정중앙 정렬

Flex 오늘은 Flex에 대하여 알아보려고 한다. 🤑 작성 개요 웹 페이지를 만들때 가장 많이 필요로 하는 기술이 무엇일까? 구글에 "css 가운데" 혹은 "css 중앙" 이라고만 입력해봐도 많은 사람들이 중앙 정렬과 가운데 정렬에 목말라있음을 알 수있다.

2022년 10월 25일
·
0개의 댓글
·
post-thumbnail

[CSS] display 속성 block, inline-block, inline 차이점

block과 inline-block의 차이점에 대해 설명해 보라고 했을 때, 느낌적으로만 알지 정확한 대답을 하지 못했다. 😅가장 기본적인 것인데 제대로 알지 못하고 CSS를 갈기는 것 같아 정리해 봤다.영어의 단어처럼 박스, 덩어리이며 가로로 전체 영역을 가지기 때

2022년 10월 20일
·
0개의 댓글
·

[CSS] visibility로 부드럽게 나타나기 & display는 외않되?

a에 hover 됐을 때 1초동안 쉽게 드갔다 나오듯이 부드럽게 나온다? 그런 것 없이 바로 빡! 하고 끝이다....렌더링 될 때 HTML CSS를 파싱하여 DOM, CSSOM이 생기고 둘이 결합해서 렌더링 트리가 만들어진다.display: none은 css에서 숨겨진

2022년 10월 20일
·
0개의 댓글
·

해상도

ppi : pixels per inchHD : 비교적 오래된 기술FHD(FullHD) : 가로 1920개의 픽셀, 세로 1080개의 픽셀을 표현할 수 있는 기기4k : 수평으로 4,000 pixels 해상도 : https://travel.plusblog.co.

2022년 10월 20일
·
0개의 댓글
·
post-thumbnail

[CSS] display : block, inline, inline-block

블록 요소는 여러개가 쌓일 때 수직으로 쌓이는 display 유형이다.width, height를 지정할 수 있다.(해당 공간에 들어있는 컨텐츠 크기보다 더 넓은 크기를 지정할 수 있으며 기본적으로 height는 가진 컨텐츠만큼 지정되며 width는 최대로 지정) mar

2022년 10월 18일
·
0개의 댓글
·

위치속성 : position, 태그의 박스 속성 display: block,inline,inline-block에 대하여

1\. position 속성 - relative, absolute, fixed웹사이트를 구현할 때 어떤 태그의 위치를 옮겨야할 때가 있다.그럴경우 가장 흔하게 쓰이는 css 속성인 position에 대하여 말해보자면 position:relative; 의 경우 2가지로

2022년 10월 17일
·
0개의 댓글
·

display(block/inline/inline-block)

html태그를 통해 만든 요소들은, 초기설정된 디폴트 값 만큼 웹 화면상에서 제각각 일정 크기의 공간을 차지한다. display 속성을 사용하면 엘리먼트가 화면상에서 보여지는 방식을 변경 할 수 있다.display 속성을 통해 부여할 수 있는 여러가지 속성값 중 가장

2022년 9월 21일
·
0개의 댓글
·

[CSS] CSS Layout의 모든 것

absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.좌표를 지정 해주기 위해서는 left, right, top

2022년 9월 20일
·
0개의 댓글
·

CSS - display 속성

CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다.display 속성이 inline 으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.대표적인 인라인 엘리먼트

2022년 9월 20일
·
0개의 댓글
·

[HTML+CSS] position, display 속성

CSS position 속성은 문서에서 요소의 위치를 정의합니다.이 속성은 왼쪽, 오른쪽, 위쪽, 아래쪽 및 z-색인 속성과 함께 작동하여 페이지에서 요소의 최종 위치를 결정합니다.relative 요소는 문서의 일반적인 흐름에 따라 배치된 다음, left, right,

2022년 9월 20일
·
0개의 댓글
·
post-thumbnail

[CSS] display 속성

noneblockinlineinline-block display : none아무것도 나타내지 않는다.display : block따로 설정하지않아도 display가 갖는 기본 설정값이다.width 가 자신의 컨테이너의 100% 가 되게한다.즉, 하나의 속성값이 가로 전체

2022년 9월 15일
·
0개의 댓글
·

Box Model

: 줄바꿈이 일어나는 박스<div> <h1> <p> : 줄바꿈이 일어나지 않고, 사이즈를 지정할 수 없는 박스<span>예를 들어, <span> 요소에 width="100px"; height="100px" 스타일을 지정해도, 사이즈는 변하지

2022년 8월 26일
·
0개의 댓글
·

[CSS]flexbox,display,flex-direction,flex-flow,flex-warp

컨테이너안에 item들이 있어야 하는 즉, 부모와 자식간의 관계를 가지고 있어야 성립2차원의 평면이 아닌 1차원의 요소들을 정렬하기 위해 나온 개념felx containeritem의 부모felx item부모의 자식간의 관계에서 자식의 해당 main axis행의 축, 주

2022년 8월 24일
·
0개의 댓글
·

[CSS] 레이아웃

문서 상에 요소를 배치하는 방법.기본값. 문서를 요소의 일반적인 흐름에 따라 배치한다.상대적 배치. static과 비슷하나 자기 자신을 기준으로 top, bottom, left, right 속성을 지정할 수 있다.absolute를 포함하는 부모 요소로 주로 사용된다.절

2022년 8월 19일
·
0개의 댓글
·
post-thumbnail

[CSS] 레이아웃 - position과 display 알아보기

CSS 레이아웃을 구성하는데 꼭 알아야할 position과 display 개념 정리

2022년 8월 16일
·
0개의 댓글
·
post-thumbnail

[CSS] 웹 문서의 레이아웃 만들기

display : block | inline | inline-block | none block : 인라인 레벨 요소를 블록 레벨 요소로 만듦. inline : 블록 레벨 요소를 인라인 레벨 요소로 만듦. inline-block : 인라인 레벨 요소와 블록 레벨 요소의

2022년 8월 15일
·
0개의 댓글
·
post-thumbnail

display : [block,inline,inline-block,none]

해당 태그 자체를 한 줄을 전부를 차지한다.(기본적으로 width 100%)margin,width,height,padding속성 정의 가능하다한 줄을 전부차지 하지않고, 따른 요소들과 나란히 한줄로 표현된다(width,height,margin-top,margin-bot

2022년 8월 2일
·
0개의 댓글
·
post-thumbnail

CSS 속성 (2)

1\. overflow요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성기본: visible - 넘친 내용을 그대로 보여줌hidden - 넘친 내용을 잘라냄auto - 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성overflow는 overflow-

2022년 7월 25일
·
0개의 댓글
·