💻 <!-- dev -->/HTML | CSS
[CSS] 참고3~8_ 화면 구조 잡기 상세부터 화면 통합
1. body에 구역 나누기 2. style에 큰 틀 잡기 3. 세부_푸터바 만들기 파일 생성해서 푸터바 따로 생성 후 가져다 붙이기 이용약관 | 개인정보취급방침 | 인재채용 | 고객센터 강남지원 1관 : 서울특별시 강남구 테헤란로14길 6 남도빌딩 2F, 3F, 4F, 5F, 6F 강남지원 2관 : 서울특별시 강남구 테헤란로10길 9 그랑프리 빌딩 4F, 5F, 7F 강남지원 3관 : 서울특별시 강남구 테헤란로 130 호산빌딩 5F, 6F 종로지원 : 서울특별시 중구 남대문로 120 대일빌딩 2F, 3F 당산지원 : 서울특별시 영등포구 선유동2로 57 이레빌딩 (구관) 19F, 20F Copyright © 1998-2022 KH Information Educational Institute All Rig..
[CSS] 11_레이아웃 관련 스타일 2
해당 차시 목표 CSS의 레이아웃 관련 스타일에 대해 알아보자 position: 절대 위치와 상대 위치를 나타냄 첫 번째 자식 두 번째 자식 세 번째 자식 position : relative; 👉🏻 기준이 되는 요소(outer)에 기준점을 부여함 👉🏻 기준점을 잡지 않으면 자동으로 body에 잡혀 버림 position : absolute; 👉🏻 움직이고자 하는 요소 내에 position : absolute를 지정하여 절대적인 위치로 움직일 수 있게 함 top : 50px; left : 50px; 👉🏻 부모 요소 (기준점 position : relative) 로부터 각각 위, 왼쪽으로부터 50px인 곳으로 옮겨 버리겠다 첫 번째 자식 두 번째 자식 세 번째 자식 고정 위치 스크롤을 ..
[CSS] 10_레이아웃 관련 스타일 1
더보기 CSS의 레이아웃 관련 스타일에 대해 알아보자 레이아웃 ✔️ 블럭 요소: 한 줄 단위로 영역이 잡힘 / 자동으로 줄 바꿈 발생 (div, p, pre, h, ...) 인라인 요소: content 부분만 영역이 잡힘 / 옆으로 배치됨 (span, label, input, img, ...) width, height 👉🏻 content 영역의 크기를 조절하는 속성 고정 크기 (px) 가변크기 (%)) display 👉🏻 블럭 요소와 인라인 요소의 속성을 변경해서 배치 방식을 변경 [ 표현법 ] 선택자 { display : inline/inline-block/block; } 1) 기존에 블럭 요소인 div를 인라인 요소로 바꿔 보기 👉🏻 display: inline 👉🏻 before: 인라인 요소로 바꾸..
[CSS] 09_배경 관련 스타일
더보기 CSS의 배경 관련 스타일에 대해 알아보자 background-color : 배경색을 지정할 때 사용 청춘의 맺어, 보는 찾아 크고 길지 착목한는 곳이 동산에는 끓는다. 고동을 없는 것은 그들의 청춘은 소금이라 모래뿐일 군영과 것이다.보라, 봄바람이다. 품에 청춘의 인생을 유소년에게서 있는 봄바람이다. 싶이 바이며, 위하여, 우리의 구하지 그러므로 황금시대를 능히 가슴에 봄바람이다. 얼음 풍부하게 웅대한 수 갑 목숨을 그러므로 이상이 청춘 칼이다. 이 두기 맺어, 따뜻한 봄바람이다. 힘차게 설레는 꽃이 대고, 그러므로 철환하였는가? backgound-clip: 배경을 적용시키고자 하는 범위를 지정할 때 사용 [ 표현법 ] 선택자 { background-clip : border-box(기본값)/pa..
[CSS] 08_테두리 관련 스타일
더보기 CSS의 테두리 관련 스타일에 대해 알아보자 ✔️ 요소의 테두리 영역 (border)의 스타일을 지정할 때 쓰임 테두리 두께, 테두리 색상, 선의 모양, 각진 정도, ... [ 표현법 ] 선택자 { * 테두리 스타일 border-위치-style : none/dotted/dashed/solid/double/groove/inset/outset; * 테두리 두께 dorder-width : 테두리두께; * 테두리 색상 border-color : 색상; * 테두리 두께, 스타일, 색상을 한 번에 지정 가능 border-위치 : 두께 스타일 색상; => 색상은 생략 가능, 색상 생략 시 글자색과 통일됨 * 테두리 모서리를 둥그스름하게 border-위/아래-좌/우-radius : 숫자값px; => 위치값 생략..
[CSS] 07_영역 관련 스타일
더보기 CSS의 영역 관련 스타일에 대해 알아보자 태그와 요소 ✔️ : 시작 태그 : 종료 태그 내용물 : "요소" 요소 영역: content + padding + dorder 여백 및 간격 관련 스타일 여백 및 간격 관련 스타일 기준 div 기준 div 인터넷 브라우저 개발자 도구(f12)에서 분석해 보기 padding 👉🏻 내용물 영역(content)과 테두리 영역(border) 사이의 거리 (안쪽 여백) 을 조정하는 스타일 속성 👉🏻 문제 1 컨텐츠 영역 padding : 100px; 예상 수치 개발자 도구로 확인해 봐도 일치함을 알 수 있음 👉🏻 문제 2 컨텐츠 영역 padding-top : 50px, padding-left : 100px; 개발자 도구로 확인해 봐도 일치함을 알 수 있음 👉🏻 문..
[CSS] 06_목록 관련 스타일
더보기 CSS의 목록 관련 스타일에 대하여 알아보자 list-style-type: 불릿기호를 변경시켜 줄 때 사용 [ 표현법 ] * 순서 없는 목록 (ul) 선택자 { list-style-type: disc/circle/square/none; 👉🏻 기본값은 disc } * 순서 있는 목록 (ol) 선택자 { list-style-type : decimal/decimal-leading-zero; 👉🏻 기본값은 decimal list-style-type : lower-alpha/upper-alpha; list-style-type : lower-roman/upper-roman; } 👉🏻 순서 없는 목록 기본값 circle, 빈 동그라미 square, 네모 none 순서 없는 목록 HTML CSS JavaScri..
[CSS] 05_텍스트 관련 스타일
더보기 CSS의 텍스트 관련 스타일에 대해 알아보자 (text~) color: 텍스트의 색상을 지정 [ 표현법 ] 선택자 { color : 색상명/16진수/rgb(x, x, x)/hsl(x, x, x)/hsla(x, x, x, x) } [ 표현법 ] 선택자 { color : 색상명/16진수/rgb(x, x, x)/hsl(x, x, x)/hsla(x, x, x, x) } text-decoration: 텍스트에 줄을 긋거나 줄을 없앨 때 사용 [ 표현법 ] 선택자 { text-decoration: none/underline/overline/line-through; } underline: 텍스트 영역 아래에 줄 긋기 line-through: 텍스트 영역 중간에 줄 긋기 overline: 텍스트 영역 위에 줄 ..
[CSS] 04_글꼴 관련 스타일
더보기 CSS의 5가지 글꼴 관련 스타일에 대해 알아보자 (font~) 애밋 문법을 이용해 p*3 + Enter 클릭 시 p 태그 3개 동시에 생성 가능 글꼴 테스트 1 글꼴 테스트 2 글꼴 테스트 3 font-family: 글꼴을 지정할 때 사용 기본 글꼴은 고딕체이며, 여러 개 지정 가능 👉🏻 앞의 글꼴이 없는 경우 뒤의 대체 글꼴을 반영 [ 표현법 ] 선택자 { font-family: 글꼴명; } 외부 웹 폰트를 사용하는 방법 👉🏻 웹 폰트 제공 사이트: Browse Fonts - Google Fonts 1. 웹 폰트 제공 사이트에 접속해서 원하는 폰트를 클릭한 후 Regular 400 + 버튼을 누름 2. 속성 3줄짜리를 복사하여 3. 속성 제일 밑 font-family~ 부분을 복사하여 4. 해..