💻 <!-- dev -->

[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. 해..

[CSS] 03_선택자 우선순위

더보기 CSS 선택자의 우선순위에 대해 알아보자 애밋 문법 div#id1.class1 👉🏻 div 만들 건데 id 속성값은 id1, class 속성값은 class1로 만들어 줘! 우선순위 테스트 ✔️ 기본적으로 css는 위에서부터 아래로 적용됨 동일한 요소를 같은 종류의 선택자로 선택했을 경우 가장 아래의 스타일이 적용됨 단, 동일한 요소를 다양한 종류의 선택자로 css가 부여된 경우 우선순위에 따라 적용됨 만약, 겹치지 않는 스타일이라면 반영이 잘됨 위에서 아래로 적용되어 yellow가 아닌 red가 덮어 씌워져 적용됨 선택자 우선순위 우선순위 우선순위 낮음 👉🏻 우선순위 높음 태그 선택자 -> 클래스 선택자 -> 아이디 선택자 -> 인라인 스타일 방식 -> !important 아이디 선택자가 클래스 ..

[CSS] 02_기타 선택자

더보기 CSS의 기타 선택자에 대해 알아보자 외부 스타일 방식 외부 스타일 방식: 스타일 정보만을 따로 관리하는 .css 외부 문서를 만들고 link 태그를 이용하여 연결시켜 주는 방법 👉🏻 head 영역에 link 코드 작성 후 진행할 것 1. 속성 선택자 스타일을 부여하고자 하는 요소 내에 작성되어 있는 속성을 이용해서 선택하는 방법 👉🏻 선택자 뒤에 []를 이용해서 속성과 속성값을 추가 조건으로 제시해서 선택하는 방법 [ 표현법 ] 선택자[속성=속성값] { => "일치" 선택자[속성~=속성값] { => "포함" (단어 기준, 띄어쓰기 기준) 선택자[속성|=속성값] { => "시작" (-로 구분된 단어 기준) 선택자[속성^=속성값] { => "시작" (일반 문자열 기준) 선택자[속성$=속성값] { =..

[CSS] 01_기초 선택자(기본 선택자)

더보기 CSS의 개요와 4가지 기본 선택자에 대해 공부해 보자 CSS = STYLE ✔️ 한 페이지 내에 뼈대와 꾸미기가 같이 있으면 복잡하고 가독성 떨어지므로 따로 처리하는 게 더 좋음 👉🏻 뼈대는 HTML, 꾸미기는 CSS 스타일 기본 형식 CSS 영역 👉🏻 스타일을 기술할 수 있는 영역 ✔️ 내부 스타일 방식 현재 이 문서에 적용시키고자 하는 스타일 정보들을 이라는 태그 내에 기입하는 방식 이 html 문서 내부에 스타일 정보를 저장하는 방법(학원에서 자주 쓸 예정) 내부 스타일 방식으로 기술한 코드의 위치 확인 ✔️ 인라인 스타일 방식 스타일을 부여하고자 하는 요소 내에 style 속성을 직접적으로 기술해서 바로 기입하는 방식 코드가 길어질수록 가독성 낮아지므로 꾸밀 내용이 소량일 때만 사용하는 ..

[HTML] 8. 하이퍼 링크 관련 태그

더보기 HTML의 하이퍼 링크 관련 태그에 대해 알아보자 하이퍼 링크란? ✔️ 문서에서 또 다른 문서로 클릭만으로 이동될 수 있게끔 연결시켜 놓은 제일 핵심적인 기능 ✔️ 텍스트 문구를 클릭해 이동하는 방법, 이미지를 클릭해 이동 가능, 현재 페이지 내에서도 링크를 통해 이동 가능 글자 관련 태그 목록 관련 태그 인터넷이 연결된 상황이라면 현재 서비스되고 있는 웹 페이지도 링크 가능 네이버로 이동 구글로 이동 이미지를 클릭해서 웹 페이지 링크 연결하기 한 페이지 내에서 점프하는 앵커 만들기 한 페이지 내에서 점프하는 앵커 만들기 본문내용1 본문내용2 본문내용3 본문내용1 북간도에 무덤 가득 라이너 있습니다. 이국 너무나 밤을 별 까닭입니다. 내 하나 오면 새겨지는 나의 버리었습니다. 둘 하나에 하나에 있..

[HTML] 7. 영역 관련 태그

더보기 HTML의 영역 관련 태그에 대해 알아보자 html 문서 기본 설정 단축키: ! + enter 블럭 요소와 인라인 요소 ✔️ 블럭 요소: 한 줄 단위로 영역을 차지하는 요소 👉🏻 줄 바꿈이 자동으로 적용되어 이미 존재하는 요소의 다음 줄에 출력 ex: h 태그들, p, pre, ..., "div" ✔️ 인라인 요소: content 영역 (시작 태그와 종료 태그 사이)만 차지하는 요소 👉🏻 줄 바꿈이 자동으로 적용되지 않아 옆으로 연이어서 출력됨 ex: b, s, mark, input, img, label, ..., "span" div 태그와 span 태그의 차이 1: 줄 바꿈 적용 div 태그 👉🏻 블럭 요소(한 줄 단위 영역 차지) span 태그 👉🏻 인라인 요소 (content 영역만을 차지)..

[HTML] 6-1. 입력 양식 연습

회원가입 동의서 이용약관 동의(필수) 여러분을 환영합니다. 네이버 서비스 및 제품(이하 '서비스')을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 '네이버')와 이를 이용하는 네이버 서비스 회원(이하 '회원') 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다. 동의합니다. 동의하지않습니다. 개인정보 수집 및 이용 동의(필수) 개인정보보호법에 따라 네이버에 회원가입 신청하시는 분께 수집하는 개인정보의 항목, 개인정보의 수집 및 이용목적, 개인정보의 보유 및 이용기간, 동의 거부권 및 동의 거부 시 불이익에 관한 사항을 안내 드리오니 자세히 읽은 후 동의하..