Web55 09. CSS Transform, Transition, Animation 1. CSS Transform - 2차원 좌표에서 요소를 변형시키는 속성 translate: 이동 rotate: 회전 scale: 확대, 축소 skew: 경사, 비틀기 Transform _ 적용예시 p { margin: 0 auto; width: 600px; padding: 20px; border: 3px solid rgba(0, 0, 0, 0.5); } #translate { transform: translate(30px, 50px); background-color: deeppink; } #rotate { transform: rotate(60deg); background-color: gold; } #scale { transform: scale(1.5, 1.2); background-color: oran.. 2024. 4. 12. 08. CSS 우선순위, Custom Properties 1. css 우선순위 계산 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용 우선순위 계산식 inline: 1,000점 id 속성: 100점 class, 속성 선택자: 10점 element: 1점 !important를 적용하면 0순위 #id-style { background-color: deeppink; } #id-style2 { background-color: deepskyblue; } div { display: block; padding: 30px; margin: 30px; background-color: gold; } .class-style3 { backg.. 2024. 4. 11. 07. 미디어쿼리 1. 미디어 쿼리(media query) 반응형 웹 하나의 웹사이트에서 pc, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법 body {background-color: deeppink;} @media screen and (min-width: 800px) { body {background-color: deeppink;} } 800px 이하일 때 800px 이상일 때 매체 유형 - all: 모든 유형 - screen: 컴퓨터, 태블릿, 스마트폰 ... - print: 프린터 적용예시(1) * {margin:0; padding:0; box-sizing: border-box;} header { width: 100%; background-color:.. 2024. 4. 11. 06. flex Flex 레이아웃 수평 정렬을 하기 위한 속성 display: flex 1. flex-wrap 라인에 여유가 없을 때 위치를 결정하는 속성 flex-wrap: 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 - nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 - wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 - wrap-reverse: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래가 아닌 위쪽으로 넘김) #container { width: 1000px; height: 500px; margin: 0 auto; border: 3px solid red; display: flex; /*기본값: nowrap;*/ /*fle.. 2024. 4. 9. 05. CSS 디스플레이, 폼, 포지션 1. CSS의 디스플레이 웹페이지의 레이아웃을 결정하는 속성 block, inline, inline-block, none, flex... visibility: hidden; visibility: visible; div{ background-color: deepskyblue; border: 3px solid red; margin-bottom: 30px; } p#none {display: none;} /*div 크기가 작아짐(실제로 사라짐!)*/ p#hiddin {display: hidden;} /*div 크기가 고정(안 보일 뿐!)*/ 디스플레이 display 속성값을 none으로 설정 display 속성값을 none으로 설정 visibility 속성값을 hidden으로 설정 visibility 속성값을 .. 2024. 4. 8. 04. 박스모델 1. 박스모델(Box Model) 모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 내용, 안쪽여백, 테두리, 바깥여백으로 구분함 내용 (content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 안쪽여백 - 패딩(padding) 테두리 사이의 간격 또는 여백 padding-top, padding-left, padding-right, padding-bottom padding: 위 오른쪽 아래 왼쪽 순으로 설정 div{ width: 200px; height: auto; background-color: deeppink; margin: 20px; color: white; } #padding1 { padding: 10px 30px 20px 40px; } #padding2 { p.. 2024. 4. 8. 03. CSS 배경 1. CSS 배경 background-color : HTML 요소에 배경색을 설정 body { background-color: deepskyblue;} div { background-color: white; width: 60%; padding: 20px; border: 3px solid red;} css 배경1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora consequatur odio nulla eos voluptatibus reiciendis tempore error fuga mollitia quae qui sequi labore dignissimos laudantium, facere voluptates praese.. 2024. 4. 8. 02. CSS의 텍스트 1. CSS의 텍스트 letter-spacing : 텍스트 내에서 글자 사이의 간격을 설정 안녕하세요. 오늘은 월요일! 안 녕 하 세 요. 오 늘 은 월 요 일 ! word-spacing : 텍스트 내에서 단어 사이의 간격을 설정 안녕하세요. 오늘은 월요일! 안녕하세요. 오늘은 월요일! letter-spacing + word-spacing 예시 .letter {letter-spacing: 5px; color:#3d80eb;} .word {word-spacing: 7px; color:rgb(222,27,173);} css 텍스트1 letter-sapcing Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam natus iusto dicta q.. 2024. 4. 8. @. 과제_나의 페이지 만들기 @. 과제_ 나의 페이지 만들기 - 나만의 페이지를 만들어보자! http://leesarah12.dothome.co.kr/ 2024. 4. 5. 이전 1 2 3 4 5 6 7 다음
