저장소

구 GitHub 클린코딩 국비지원 과제로 한 내용이지만 필요없는데 있는 내용이나 이상한 부분이 많습니다. 개인 복습용 저장공간입니다. ✔ HTML 부분 Personal Open Source Businees Explore pricing Blog Support sign in sign up How people build software Millions of developers use GitHub to build personal projects, support their businesses, and work together on open source technologies. Use at least one letter, one numeral, and seven characters Sign up for GitHub..

✔ 솔로의 식탁 HTML DOCTYPE html> 솔로의 식탁 솔로의 식탁 밥/죽 셀러드 반찬 일품요리 음료.칵테일 솔로의 식탁 ✔ 솔로의 식탁 CSS 휴대폰, 태블릿, 컴퓨터 크기에 따라 설정 @font-face { font-family: 'Y_Spotlight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/Y_Spotlight.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'Y_Spotlight';} #container{ width: 100%; margin: 0 auto; } nav { height: 50px;..

CSS 2D transform 2차원 좌표에서 요소를 변형시키는 속성 이동, 확대, 축소, 회전, 경사등을 만들 수 있음 translate : 이동 rotate : 회전 scale : 확대, 축소 skew : 경사(약간 꼬거나 틀기) DOCTYPE html> transform p{ width: 600px; padding: 20px; border: 3px solid rgba(0,0,0,0.5 ); } #translate { transform: translate(30px, 50px); /*이동에 관한 것- > x,y*/ background-color: deeppink; } #rotate { transform: rotate(60deg); /*~도 회전하는 기능 - deg*/ background-color: g..

✔ 미디어쿼리 미디어 쿼리(media query) - 특정 속성이 적용되는 범위가 변경되었을 때 컨텐츠를 별도록 변경하지 않아도 알맞는 형태로 스타일을 조절 @media 매체유형 and(속성에 대한 조건){ css코드 ... } ✔ 미디어쿼리 코드1 DOCTYPE html> 미디어쿼리1 body { background-color: beige; } @media screen and (min-width : 1024px) { body { background-color: aqua; } } 미디어쿼리 ✔ 미디어쿼리 결과 ✔ 미디어쿼리 코드2 DOCTYPE html> 미디아쿼리2 인스타그램 유튜브 페이스북 트위터 Lorem ipsum dolor sit amet consectetur adipisicing elit. M..

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

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

✔ CSS 위치 CSS Position 요소의 위치를 결정하는 방식을 설정 1. 정적(stataic)위치 지정방식 - 기본값 - HTML 요소의 위치를 결정하는 기본적인 방식 - 단순히 웹 페이지의 흐름을 따라 요소들이 위치를 결정하는 방식 ✔ CSS 상대위치 2. 상대(relative)위치 지정방식 - HTML 요소의 기본위치(정적 위치 지정방식)를 기준으로 위치를 재설정 하는 방식 - top, left, right, bottom 속성 값을 사용할 수 있음 ✔ CSS 상대위치 코드 DOCTYPE html> 상대위치지정방식 .relative1 { width: 200px; background-color: deeppink; padding: 20px; } .relative2 { position: relativ..

✔ CSS 배경 CSS 배경 background-color HTML 요소의 배경색을 설정 ✔ CSS 배경 코드 DOCTYPE html> CSS 배경 1 body {background-color: deepskyblue;} div {background-color: white;width: 60%;padding: 20px;border: 3px dotted red;} CSS 배경 1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse eligendi molestiae harum deserunt vel. Sequi illo illum maxime labore. Sapiente cupiditate explicabo perferendis arc..

✔ CSS 컬러 CSS의 컬러 1. 색상 이름으로 표현 deeppink, deepskyblue, red, blue.. 2. RGB 색상값으로 표현 rgb(0~255, 0~255, 0~255) - 0에 가까울수록 그 색상이 연하게 나온다고 생각 -> rgb(0, 0, 255) - 파랑 rgba(0~255, 0~255, 0~255, 0~1의 소수) - 투명,불투명 효과 추가할 3. 16진수 색상값으로 표현 #0000ff(파랑) #00 00 ff -> #00f R G B ✔ CSS 텍스트 CSS의 텍스트 color 텍스트의 색상을 설정, 기본색은 검정색 letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 안 녕 하 세 요 . 오 늘 은 화 요 일 화 가 나 네 요 . word-spacing 텍스..

✔ 그룹 선택자 1. 그룹 선택자 여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용 h2, p {text-align: center;} 제목 HTML 구조 안녕하세요 를 알아볼게요 HTML구조 ✔ 그룹 선택자 코드 DOCTYPE html> 그룹선택자 h2,p,h3,ul {text-align: center;} h2 {color: deepskyblue;font-size: 50px;} li {display: inline-block; margin-right: 30px; font-weight: bold; color: deeppink;} 그룹선택자 여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용 선택자의 종류 전체 요소 아이디 클래스 그룹 ✔ 그룹 선택자 결과 ✔ 자손 선택자 2. 자손 선택자 조상요..

✔ 상속 ✔ 상속 부모 요소의 속성값이 자식 요소에게 전달되는 것 과제. 본인의 홈페이지에 아래와 같이 적용 index.html : 대문 index.html 메뉴 [홈(index.html) 인터넷기사(news.html) 이력서(resume.html) 즐겨찾기(favorite) ] 즐겨찾기 본인이 자주가는 웹사이트 3개이사 소개하는 페이지(iframe 적용) ✔ 상속 코드 DOCTYPE html> 상속 div{ color: deeppink; border : 3px dotted gold; padding: 30px; } 상속 div 영역 상속이란 부모 요소의 속성값이 자식 요소에게 전달되는 속성 ✔ 상속 결과 ✔ 전체 선택자 선택자 1. 전체 선택자 스타일을 모든 요소에 적용 * { padding: 0; ma..

✔ CSS CSS(Cascading Style Sheets) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 ✔ 내부스타일 코드 DOCTYPE html> 내부 스타일 h2{font-size: 50px;} /* h2 요소의 사이즈를 50px로 설정*/ p{font-size: 25;} ul{list-style: none;} li{color: deeppink; font-weight: bold; display: inline-block; margin-right: 30px;} 내부 스타일 CSS를 사용하는 방법 인라인 스타일 내부 스타일 외부 스타일 ✔ 내부스타일 결과 ✔ 외부 스타일 3. 외부 스타일 웹 ..