본문 바로가기

HTML, CSS/CSS

 (19)
[CSS] position 글의 인라인이나 블록의 흐름에서 벗어나 요소를 자유롭게 배치할 때 쓰는 속성이다. 속성 적용 기존 자리 static (default) 기본 글의 흐름을 따른다. 차지 relative 기본 글의 공간에서 움직인다. 차지 absolute 상위 태그 중 가장 가까운 포지셔닝이 된 부모 태그 기준으로 한다. 차지하지 않음 fixed 브라우저 기준 화면이 고정된다. 차지하지 않음 sticky 움직이다가 맞닿으면 고정된다. 차지 position:relative;는 다음과 같이 원래 노란색이 있던 자리를 남겨두고 노란색을 움직인다. position:absolute;는 부모 태그 중 position이 적용된 요소를 기준으로 따라간다. position:fixed;는 항상 고정된 위치에 존재한다. 유튜브 검색창처럼 스크롤..
[CSS] 캐스케이드 CSS에서 font-color나 font-size 등 여러 번 선언되는 요소들이 있다. 이 때, 어떤 요소가 적용될 것인가? 이 때 우선순위를 정해주는 것이 캐스케이드이다. h2{ 요소; } h2를 선언할 때 기본으로 주어지는 default 값이 있다. 하지만 우리가 h2에 선언한 요소가 있다면 default보다 우선순위가 높다. .test{ color:red; } .test{ color:blue; } 동일한 선언자를 선언하고 겹치는 요소가 있다면 아래쪽이 우선순위가 높다. 선택자들끼리 우선순위를 비교하기 위한 명시도가 있다. 명시도는 [아이디 클래스 태그] 순으로 나타낸다. 예시) .test.abc 와 .test#abc 를 비교하자. .test.abc 는 클래스 2개이므로 명시도는 0 2 0이다. .t..
[CSS] 독특한 선택자 *{ box-sizing: border-box; } * 선택자: 모든 요를 선택한다. .클래스 :nth-child(a) .클래스 :nth-child(even) .클래스 :nth-child(2n) .클래스 :nth-child(odd) .클래스 :nth-child(2n+1) .클래스 :first-child .클래스 :last-child 몇 번째 자식을 선택할 때 사용하는 선택자. 단, 0번부터 시작이 아닌 1번부터 시작이다. 1번 : a번째 자식 2번 3번: 짝수번째 자식 4번 5번: 홀수번째 자식 6번: 첫번째 자식 7번: 마지막 자식
[CSS] 선택자 선택자{ 요소; } 적용시킬 대상을 선택자라고 한다. 선택자1, 선택자2{ 요소; } h2#선택자3.선택자4{ 요소; } 위의 1번 코드는 선택자 1과 선택자 2는 동일한 요소를 적용받는다는 뜻이다. 2번 코드는 h2이고 id가 선택자3이고 class가 선택자4인 요소에 적용한다는 뜻이다. id와 class의 순서는 바뀌어도 된다. .부모선택자 > 자식선택자{ 요소; } .부모선택자 자손선택자{ 요소; } 자식 결합자, 자손 결합자 : 부모와 자식을 결합해주는 역할을 한다. 차이로는 자식결합자는 오직 자식 밖에 안 되고 자손 결합자는 안쪽 태그면 다 가능하다. a:가상클래스{ 요소; } 가상클래스(Pseudo-class) : 요소의 상태를 선택할 때 사용하는 클래스이다. 사용법은 정해진 이름 앞에 콜론(..
[CSS] 블록과 인라인 블록(Block) 사용 가능한 최대 너비를 지닌다. 높이는 내부 콘텐츠 크기만큼 설정됨. {width:100%; height: auto}와 같은 CSS 속성이 default로 설정되는 것과 다름없음. width와 height로 크기 지정가능. padding과 margin으로 상하좌우 여백 지정가능. 여러 개의 블록요소들이 있을 때, 수직으로 쌓임.(한 줄에 하나의 블록) ~, , 등은 기본으로 display: block를 가짐. 인라인(inline) 너비와 높이를 내부 콘텐츠 크기만큼 설정됨. {width: auto; height: auto;}와 같은 CSS 속성을 default로 설정되는 것도 다름없음. width와 height로 크기 지정 불가능. padding과 margin으로 좌우만 여백 지정가능..
[CSS] 박스 모델 HTML/CSS에서 요소는 기본적으로 박스 형태이다. margin(바깥여백)-border(테두리)-padding(안쪽여백)-content(내용)으로 이루어져 있다. #test{ margin: 30px; padding: 50px; width: 150px; } test의 너비는 어떻게 될까? 우리는 150px이라 생각하고 만들었을 것이다. 하지만 width는 content의 width로 취급되어 박스 너비는 50 + 50 + 150 = 250px이 된다. 이 경우 우리는 박스 크기를 하나하나 생각하기 힘들 것이다. 해결하기 위해서는 아래 요소를 넣으면 된다. box-sizing: border-box; 다음 요소를 넣으면 content 기준으로 width를 잡는 게 아닌 border-box 기준으로 잡아준다...
[CSS] 테두리 .test{ border: 굵기 테두리종류 색상 border-radius: 둥근 정도 } border: 굵기 테두리종류 색상 border는 padding과 margin 사이의 테두리이다. 굵기 2px(2px 짜리 선), 10px(10px 짜리 선) 테두리 종류: soild(실선), dotted(점선), dashed( -로 이루어진 선) 색상: 색상코드를 입력하면 된다. border-radius: 둥근 정도 모서리를 둥글게 만들어 준다. 둥근 정도: 0%(사각형), 50%(타원), 100%(원),0px(사각형) ,9999px(알약 모양)
[CSS] 배경 속성(이미지, 그라데이션, 그림자, 불투명도) .test{ background-image: url('이미지 주소'); background-repeat: no-repeat; background-position:center; background-size: cover; } background-image: url('이미지주소'); 배경이미지를 넣을 수 있도록 하는 태그 background-position 배경의 위치를 정하는 태그 top, right, bottom, left, left top(기본값), center 2개를 적으면 가로, 세로로 취급한다.(center center 가로 세로 둘 다 가운데 정렬) background-repeat 이미지를 반복할지 않할지 정하는 태그 repeat, no-repeat background-size 배경의 크기를 정하..

티스토리툴바