# display

102개의 포스트

Display : inline, block, inline-block

Display 속성이 가질 수 있는 세 종류의 값과 그 특성에 대해 알아봅시다.

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

[TIL] 2021.11.29 (CSS - display, positon 복습, 시멘틱 웹)

\[CSS] Flexbox, Display, PositionSemantic Web

2021년 11월 29일
·
0개의 댓글

[CSS] 태그를 숨기거나 보이게 하는 3가지 방법

태그가 나타나고 감춰짐에 따라 transition을 적용하고 싶다면 이 속성을 추천태그가 숨겨지면 클릭 이벤트도 적용되지 않는다.태그의 투명도를 조절하는 방법태그가 눈에 보이지 않을 뿐 클릭 이벤트는 적용 됨.. 태그를 화면에서 완전히 감추거나 나타나게 한다.trans

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

TIL | CSS3 - Flex 속성에 관하여

-> Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다.우선 Flex는 2개의 개념으로 나뉘어진다.첫 번째는 Container 두 번째는 Items 이다.위에서 살펴본 바와 같이 Container는 Items

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

TIL] CSS-Display

html 요소들은 기본적으로 inline, block, inline-block 등 각자 고유의 디스플레이 속성을 갖고 있다. 하지만 이러한 속성은 불변적인 것은 아니다. display는 기본 속성과 상관없이 사용하고자하는 속성으로 지정 할 때 사용한다. 이러한 속성을

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

WIL- CSS[Flex]

flex는 정렬이나 공간을 구분해서 레이아웃을 만들 수 있는 '레이아웃 배치 전용' 기능으로 사용되는 요소이다.1\. display의 속성으로 display:flex; 이렇게 작성한다.2\. flex는 block의 성질을 가지고 있으며, 부모 요소인 container와

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

TIL 07___CSS basic 3(레이아웃)

* CSS의 레이아웃을 구성하는 박스 모델에 대해 세부적으로 알아본다. ▶︎ CSS 박스 모델 웹 문서의 내용을 박스 형태로 정의하는 방법이다. 박스 모델에는 마진과 패딩, 테두리 등 박스가 여러 겹 들어 있다. 1. Block level 요소와 Inline l

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

CSS: position, inline, block

a. position html 코드와 상관없이 원하는 어느 위치에나 요소를 그릴 수 있다. relative, absolute, fixed 가 주로 사용된다. relative -> position: relative; : 이 자체로는 특별한 의미나 효과가 없으며, top, right, bottom, left와 같은 속성이 추가되어야 해당 위치로 이동할 수 있...

2021년 11월 2일
·
0개의 댓글

inline, inline-block, block이란!

웹피이지에서 요소들이 어떻게 보여지고 다른 요소들과 어떻게 배치되는지를 결정css를 이용하여 inline을 block으로, block을 inline으로 바꿀 수 있다inline 해당 요소의 길이만큼 크기를 갖는 요소 width, height를 설정할 수 없다 in

2021년 11월 2일
·
0개의 댓글

css-display, position

1. display   CSS의 display 속성은 해당되는 요소를 화면에 어떻게 보여줄 지를 정하는 속성이다. > display 속성을 해당되는 요소를 어떤 박스 안에 넣을 것인가라고 이해했다.   대부분의 태그들이 `태그와 `

2021년 11월 2일
·
0개의 댓글

[css] 요소 배치

초기값 : staticpostion을 지정해주면 zindex 값을 지정해서 순서를 변경할 수 있음top, right, bottom, left 를 지정해서 해당 요소를 이동시킴top, right, bottom, left 값을 주지 않으면 초기값인 static과 레이아웃에

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

#2.HTML&CSS(Nav-bar제작 with position속성, display속성)

HTML과 CSS를 학습중에 CSS의 position과 display속성의 중요성을 다시금 알게 되었는데, 유튜브를 보며 따라 만들었던 Nav-bar를 보며 이러한 속성들을 어떻게 적용시킬 수 있는지 리뷰해보기로 했다.사실 이번 학습전까지는 display속성의 flex

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

[WebCafe] member-service 부분 구성(Negative Margin)

negetive margin 공부 메인메뉴 h2 태그 안보이게 하기 위해서 display: none; ->이렇게 하면 안됨. 왜냐면 아예 없애버리는거기땨문에, 접근이 불가능. 접근을 할 수 있도록 해야지 -> 화면 밖으로 나가버리게 한다. 근데 스크린리더가 읽을때

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

display, visibility, opacity 프로퍼티

1. display display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. 1.1 block 항상 새로운 라인에서 시작한다. 화면 크기 전체의 가로폭을 차지한다. (width: 100%) width, height, margin, padding

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

TIL / 20211013 / CSS 개념 정리

display 프로퍼티 4가지block 항상 새로운 라인에 표시width, height, margin, padding 프로퍼티 설정 가능inline새로운 라인으로 시작하지 않고 한 라인에 표현 됨width, height, margin, padding 프로퍼티 지정 불가

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

css 기본 selector & layout 정리 드림코딩

Cascading Style Sheet : 세부적인 정의가 있다면 스타일 적용을 하고 정의되어있는 게 없다면 다음 기본으로 지정된 스타일을 적용한다.Style 종류Author Style : 우리가 작성하는 style sheetUser Style : 사용자가 지정한 st

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

Visibility, Display

visible : 요소가 보임hidden : 요소가 웹 페이지에 나타나지 않으나 공간(레이아웃)은 계속 유지collapse<table> 행, 열에 적용하면 display=none으로 설정한 것과 동일하게 적용된다.다른 요소에서는 hidden과 동일하다.ex) &l

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

CSS - LayOut(레이아웃)

display inline, block, inline-block > - inline은 요소의 내부 콘텐츠 크기만큼만 영역을 차지해서, width와 height의 값을 임의로 지정할 수 없습니다. 요소가 여러개면 가로로 배치 됩니다. block은 요소의 내부 콘텐츠와

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

[CSS] Flexbox

flex-direction, flex-wrap,justify-content align-items 같은 flex-box요소들과, flex-grow, flex-basis, align-self 같은 flex-item요소들에 대해 다룬다.

2021년 10월 1일
·
0개의 댓글