Study/css
-
floatStudy/css 2020. 6. 22. 22:51
float은 한 요소(element)가 보통의 흐름으로부터 빠져나와 텍스트 및 인라인 요소가 컨테이너의 좌우측을 따라 배치되는 것을 지정한다. 일반적인 정렬과는 다르게 float 정렬된 것 주위로 다른 컨텐츠가 흐르듯이 배치가 된다. 이렇게 흐르는 듯한 배치가 가능함으로 사이트를 레이아웃할 때도 사용한다. 문법 /* Keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /* Global values */ float: inherit; float: initial; float: unset; 값 left 는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해..
-
inline & blockStudy/css 2020. 6. 22. 22:38
html의 요소는 '블록레벨 요소'와 '인라인'요소로 분류될 수 있다. 블록레벨? 인라인?? 무엇일까?? 알아보도록 하자. 위와 같이 한 너비를 모두 차지 하는 태그를 block 요소 라고 부르고, 지정된 컨텐츠 내용값만 차지하며, 옆에 다른 값을 바로 이어서 받을 수 있는 태그를 inline 요소라 부른다. 위 그림의 1-4 줄은 block 요소, 5번째 줄은 inline요소 인 것이다. inline 예제를 살펴보도록 하자. 다음 span은 인라인 요소로, 영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다. 이 예제에서 div는 텍스트를 가진 블록레벨 요소이다. 이 텍스트 안에는 인라인 요소인 이 존재한다. span은 인라인이기때문에 전체 문단이 끊기지 않고 하나로 그려진다. 결과를 확인해보..
-
position 속성_ relative, absolute, fixedStudy/css 2020. 6. 22. 22:04
Position CSS의 position 프로퍼티를 사용하면 html코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있다. 즉, 문서상에 요소를 배치하는 방법을 지정하는 역할을 한다. position에서 사용하는 값은 4개가 있는데, static은 거의 사용하지 않아서 넘어가겠다. position: static; position: relative; position: absolute; position: fixed; relative .relative { position: relative; } 이렇게 position: relative 한다고 해서 클래스명이 relative인 div의 위치가 변하고 이런건 아니다. 사실 이 것 자체로는 특별한 의미는 없다. 위치를 이동시켜주는 top, right, b..
-
position:absolute 인 요소를 중앙에 위치시키는 방법Study/css 2020. 6. 19. 12:33
css 를 하다보면 position을 사용해야할 때가 있다. 그런데 position은 위치를 위, 아래 , 오른쪽, 왼쪽 하나하나 지정을 해줘야해서, 내가 원하는 위치에 둘 수는 있지만 정 가운데 두고 싶을 때에는 어렵다...ㅋㅋㅋ 이럴때, 중앙정렬 하는 방법! .title {position:absolute; left;50%; transform:translateX(-50%);} 화면의 전체 가로 수치에서 절반 만큼의 위치로 이동 시킨다. (left:50%) 자신의 가로 수치의 절반 만큼 마이너스 이동 시킨다. (transform:translateX(-50%)) 참조:http://blog.freezner.com/archives/1877
-
CSS: Shrink-to-fit a DIV to equal the width of its contentStudy/css 2020. 6. 17. 18:40
Shrinking a DIV-Container to fit the width of its content can be very useful sometimes, especially if you tried margin: 0 auto to center and found out it doesn’t work. Why not? Because DIVs are block elements and take all the space they can get. To still equal the width of the DIV to the width of its content, we need to make it display:inline-block or display:table. The former has the disadvanta..
-
:not ()Study/css 2020. 6. 13. 12:16
부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 기능 표기법이다. X는 다른 부정 선택자를 포함해서는 안 된다. 구문 :not(selector) { style properties } 예제 //index.html Some text. Some other text. One more text //index.css p:not(.classy) {color: red;} body:not(p) {color: green;} 위의 css 및 html이 주어진다면, 이 같은 출력을 얻습니다: Some text. Some other text. One more text 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/:not
-