💻 <!-- dev -->/HTML | CSS
[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. 입력 양식 연습
회원가입 동의서 이용약관 동의(필수) 여러분을 환영합니다. 네이버 서비스 및 제품(이하 '서비스')을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 '네이버')와 이를 이용하는 네이버 서비스 회원(이하 '회원') 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다. 동의합니다. 동의하지않습니다. 개인정보 수집 및 이용 동의(필수) 개인정보보호법에 따라 네이버에 회원가입 신청하시는 분께 수집하는 개인정보의 항목, 개인정보의 수집 및 이용목적, 개인정보의 보유 및 이용기간, 동의 거부권 및 동의 거부 시 불이익에 관한 사항을 안내 드리오니 자세히 읽은 후 동의하..
[HTML] 6. 입력 양식 및 폼 관련 태그
더보기 HTML의 입력 양식 및 폼 관련 태그에 대해 알아보자 input 관련 태그 사용자에게 값을 입력받을 수 있는 텍스트 상자 또는 체크박스 등을 만들 수 있음 ✔️ 아이디: 비밀번호: 성별: 남 여 회원가입 입력 양식의 틀을 의미 form 태그 내의 submit 버튼을 클릭 시 해당 form 내에 작성된 사용자가 입력한 값들을 서버로 넘기면서 요청하는 역할을 수행 ✔️ 👉🏻 action 속성: 해당 form 내에 사용자가 입력한 값들을 전달할 서버의 경로 (어디로 보낼 건지) 👉🏻 method 속성: 요청 전송 방식을 지정하는 속성 (get / post 택1로 값을 넘김) > get 방식: 요청 시 사용자가 입력한 값들이 url에 노출되는 방식 > post 방식: 요청 시 사용자가 입력한 값들이 u..
[HTML] 5. 이미지 및 멀티미디어 관련 태그
더보기 HTML의 이미지 및 멀티미디어 관련 태그를 알아보자 *해당 알집 파일을 html-workspace에 압축 푼 후 실행할 것 이미지 관련 태그(정리 ver.) ✔️ src = source의 약자 img src= 경로는 필수지만 나머지는 선택사항임 👉🏻 alt="이미지설명문구" - 사진의 경로가 잘못되거나 이미지를 제대로 표현할 수 없을 때 대체 텍스트의 용도 - 시각 장애인들을 위한 스크린리더(화면 낭독기)에서 이미지를 읽어 주는 설명 문구 : 접근성을 높여 주는 용도 👉🏻 width 속성, height 속성 - 이미지의 가로, 세로길이를 조정 가능한 속성 px: 고정길이(화면의 사이즈가 변해도 이미지의 사이즈는 변하지 않음) % : 가변길이(화면의 사이즈가 변하면 이미지의 사이즈도 변함) 이미지..
[HTML] 4. 표 관련 태그
더보기 HTML의 표 관련 태그를 알아보자 표 관련 태그(정리 ver.) 표: 문서에서 다량의 데이터를 정리해서 표현하고자 할 때 사용 행과 열로 이루어져 있음 표를 구성하는 태그로는 , , , 👉🏻 : 기본적으로 표를 생성해 주는 태그 테이블태그 내부에 행과 열을 표현함 👉🏻 : 표의 한 행을 나타내는 태그 (가로줄 한 줄) 👉🏻 : 표의 한 칸을 나타내는 태그(주로 컬럼명을 작성할 때 씀) => 제목 칸을 나타냄 👉🏻 : 표의 한 칸을 나타내는 태그(주로 컬럼값을 작성할 때 씀) => 일반 칸을 나타냄 👉🏻 현재 표 테두리의 기본값이 0이기 때문에 previewer에는 보이지 않는 것임 ✔️ 테이블의 구조 thead: 이 테이블의 머리부를 의미하게 됨, 테이블당 1개만 존재 가능 tbody: 이 테이..