흰둥이는 코드를 짤 때 짖어 (왈!왈!왈!왈!왈!왈!왈!왈!왈!왈!왈!)

http://lehj2308.dothome.co.kr/ 최초의 내 사이트 lehj2308.dothome.co.kr CSS @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); * { font-family: 'Noto Sans KR', sans-serif; } body, h2, h3, input{ margin: 0; padding: 0; } h3 { font-size: 26px; text-align: center; font-weight: bold; } ul { display: flex; justify-content: center; align-items: center; } li{ list-style: none; } ul > li{ display: ..

CSS 우선순위 계산 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용 계산식 inline: 1000점 id 속성: 100점 class, 속성 선택자: 10점 element: 1점 !important를 적용하면 0순위 CSS css.css div{ background-color: purple; } HTML css 우선순위 div 1번(인라인 스타일 우선: aqua) div 2번(id 점수 우선: deeppink) div 3번(class 점수 우선: greenyellow) div 4번(같은 속성의 경우 나중에 적용한 속성이 우선: pink) div 5번(같은 요소일 ..

css animation 요소의 현재 스타일을 다른 스타일로 변환 @keyframe 시작: 0%, from 과정: 1%, 3%, 10%, .. 끝: 100%, to 0% 5% 50% ... 100% 장면1 장면2 장면3 끝 장면 animation-name: 애니메이션의 이름을 설정 animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정 forwards: 애니메이션 키프레임이 완료 되었을 때 마지막 프레임을 유지 animation-direction: 애니메이션의 진행 방향을 정하는 속성 reverse: 반대 순서로 진행 alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행 reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행 animati..

css 2D transform 2차원 좌표에서 요소를 변형시키는 속성 translate: 이돌 rotate: 회전 scale: 확대, 축소 skew: 경사, 비틀기 CSS p { 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: orange; } #skew { transform: skew(30d..

미디어 쿼리(media query) 반응형 웹 하나의 웹사이트에서 PC, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법 @media 매체유형 and (속성에 대한 조건){ css 코드 ... } ✅매체 유형 all: 모든 매체 screen: 컴퓨터, 태블릿, 스마트폰 ... print: 프린터 speech: 스크린 리더 body{ background-color: beige; } @media screen and (min-width: 1024px) { body { background-color: deepskyblue; } } 브라우저의 가로길이에 따라 배경색이 바뀌는걸 확인할 수 있다. em 과 rem 상대적인 크기를 정하는 단위 em 부모 요..

다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼을 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정 column-gap: 단과 단사이의 여백을 설정 column-span: 단과 안의 포함된 요소를 다단편집에서 해제(all) CSS div, h2, p { margin: 0; padding: 0;} h2 { padding: 0 0 20px; text-align: center; } div.col { text-align: justify; padding: 20px; background-color: gold; border: 3px solid red; column-count: 3;..

박스 모델(Box Model) 모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 패딩(padding) 내용과 테두리 사이의 간격 padding-top, padding-right, padding-bottom, padding-left padding: 위 오른쪽 아래 왼쪽순으로 설정 CSS #padding1{ padding: 10px 30px 20px 40px; } #padding2{ padding: 20px 30px 40px; } div#padding{ padding: 30px 50px; } div#padding{ padding: 20px; } HTML 패딩 Lorem .....

CSS 배경 background-color HTML 요소의 배경색을 설정 CSS HTML css 배경1 배경 적용하기 Lorem ... background-image HTML 요소의 배경으로 나타날 배경 이미지를 설정 배경 이미지는 기본 설정으로 반복되어 나타남 background-image: url(파일경로); background-repeat 배경 이미지를 수푱이나 수직방향으로 반볻하도록 설정 repeat-x, repeat-y, no-repeat CSS HTML css 배경2 background-position 반복되지 않는 배경 이미지의 상대 위치를 설정 %나 px을 사용해서 상대위치를 직접 설정할 수 있음 상대 위치를 결정하는 기분을 왼쪽 상단(left top) left top, center top..