프로필사진
FE_Log
JunO3O
홈
방명록
전체글
검색
카테고리
태그 보기
즐겨찾기
태그 목록
입력 양식 요소 배치 CSS 단위 글자 속성 배경 속성 html 공간 분할 css 반응 선택자 상태 선택자 태그 선택자 one true 레이아웃 그레이디언트 아이디 선택자 글자 생략 목록태그 글자태그 display 속성 the web developer bootcamp 박스 속성 위치 속성 수평 레이아웃 속성 선택자 유동 속성 vscode 중앙 레이아웃 자손 선택자 후손 선택자 Udemy 구조 선택자
즐겨찾기
Copyright © Design Maker - vlo.
'분류 전체보기' 카테고리의 글 목록 (4 Page)

분류 전체보기(50)

반응 / 상태 / 구조 선택자
댓글수 · 2023.03.21
반응 / 상태 / 구조 선택자 # 반응 선택자 ㅁ 반응 선택자는 사용자 반응으로 생성되는 특정한 상태를 선택합니다. ㅁ 사용자가 특정 태그 위에 마우스 커서를 올리면 hover 상태이고, 특정 태그를 마우스로 클릭하면 active 상태입니다. 형태 설명 :active 사용자가 마우스로 클릭한 태그 선택 :hover 사용자가 마우스 커서를 올린 태그 선택 ㄴ> h1:hover 형식으로 붙여서 작성해야 하며, h1 : hover 처럼 태그와 선택자를 띄어쓰기를 통해 작성하면 안됩니다. 반응 선택자 # 상태 선택자 ㅁ 상태 선택자는 입력 양식의 상태를 선택할 때 사용합니다. ㅁ 어떤 상태인지 알아야 상태 선택자를 쉽게 사용할 수 있습니다. 형태 설명 :checked 체크 상태의 input 태그 선택 :focu..
후손 선택자 / 자손 선택자
댓글수 · 2023.03.21
후손 선택자 ? 자손 선택자 ? # 부모 / 자손 / 후손 선택자 css 선택자 기본 선택자 전체 선택자 태그 선택자 아이디 선택자와 클래스 선택자 ㄴ> div 태그를 기준으로 div 태그는 부모 선택자가 되고, h1 태그와 h2 태그 그리고 ul 태그를 자손 선택자라고 하며, div 태그 아래에 위치한 모든 태그(자손 선택자 포함)를 후손 선택자라고 합니다. # 자손 선택자 ㅁ 자손 선택자는 특정한 태그의 자손을 선택할 때 사용합니다. 형태 설명 선택자 a > 선택자 b 선택자 a의 자손인 선택자 b 선택 ㅁ 부모 바로 아래 있는 태그에 대해서 스타일을 적용합니다. 자손과 후손을 구별할 줄 알아야 합니다. 여기보세요~ 네비게이션 타이틀입니다. 문단 안에 작성한 글입니다. # 후손 선택자 ㅁ 후손 선택자..
속성 선택자
댓글수 · 2023.03.21
속성 선택자 ㅁ 속성 선택자는 아래 표와 같은 형태로 입력하며, 특정 속성과 값이 있는 태그를 선택할 때 사용합니다. ㅁ 대괄호 [ ] 를 사용해 입력합니다. 형태 설명 선택지[속성] 특정한 속성이 있는 태그 선택 선택지[속성 = 값] 특정한 속성 내부 값이 특정 값과 같은 태그 선택 # 속성 선택자 ㅁ 속성 선택자를 사용해 input 태그를 선택할 수 있습니다. ㄴ> input을 통해 [type="속성"] 을 선택하여 속성 선택자를 이용할 수 있습니다.
기본 선택자
댓글수 · 2023.03.21
기본 선택자 종류 형태 설명 전체 선택자 * HTML 페이지 내부의 태그를 모두 선택 태그 선택자 태그 HTML 페이지 내부의 특정 태그를 모두 선택 아이디 선택자 #아이디 특정 id 속성이 있는 태그 선택, 웹 표준에 id 속성은 웹 페이지 내부에서 중복되면 안된다는 규정이 있으므로 아이디 선택자는 특정 태그 하나를 선택할 때 사용 클래스 선택자 .클래스 특정 클래스가 있는 태그 선택 # 전체 선택자 사용하기 ㅁ 전체 선택자는 모든 태그의 color 스타일 속성을 동일한 값으로 변경합니다. 제목 글자 태그 전체 선택자 연습하기. # 태그 선택자 적용하기 ㅁ 만약 h1 태그의 color 스타일 속성에 green 값을 적용하고, p 태그의 color 스타일 속성에 orange 값을 적용하려면 아래와 같이 ..
선택자
댓글수 · 2023.03.21
CSS 선택자 # 선택자 ㅁ 특정 HTML 태그를 선택할 때는 선택자를 사용합니다. ㅁ 선택자를 사용해 특정 HTML 태그를 선택하면 선택한 태그에 원하는 스타일이나 스크립트를 적용할 수 있습니다. ㅁ 아래와 같이 선택자, 스타일 속성, 스타일 값을 지정합니다. h1 { /* h1 은 선택자입니다. */ color : green; /* color 은 속성입니다. */ } /* green 은 스타일 값 입니다. */ ㅁ style 태그 내부에 css 블록을 넣어 작성한 코드를 스타일시트라고 합니다. CSS 선택자를 공부합니다. ㄴ> h1 태그의 color 스타일 속성에 스타일 값을 green으로 준다 ! 라는 뜻입니다. # 선택자 종류 ㅁ CSS 선택자는 스타일시트뿐만 아니라 자바스크립트에서도 사용하는데 ..
웹 문서 업로드하기
댓글수 · 2023.03.21
웹 문서 업로드 # 호스팅 서버 준비하기 - HTML 로 만든 웹 사이트를 다른 사람이 볼 수 있도록 하려면 웹 문서와 사용한 파일들을 서버 컴퓨터로 업로드해야 한다. - 웹 서버를 직접 구입하고 관리하기 어렵기 때문에 매달 혹은 몇 년마다 일정 금액을 내고 사용하는 호스팅 서비스를 많이 이용한다. # FTP 프로그램 설치하기 - FTP 프로그램이란 사용자 컴퓨터에서 작성한 웹 문서와 각종 파일을 서버로 업로드(upload)하거나 서버에서 다운로드(download)할 수 있도록 해주는 프로그램 # 닷홈에 무료 호스팅 서비스 신청하기 -> FileZilla 설치하고 서버에 접속하기 1. 닷홈 : https://www.dothome.co.kr/ 2. FileZilla : https://filezilla-pr..
응용하기
댓글수 · 2023.03.21
블로그(?) 뼈대 만들어보기! HTML5 Example PHJ HTML5 데이터 1 데이터 2 CSS3 데이터 1 데이터 2 데이터 3 JavaScript 데이터 1 데이터 2 데이터 3 데이터 4 데이터 5 HTML5 관련 내용 2022년 07월 09일 강아지 귀엽네요 ㅎ 키우고 싶습니다 ! HTML5 응용하기 2022년 07월 10일 이미지를 하나 더 추가해봅니다 이 친구도 귀엽네요 카테고리 데이터 1 데이터 2 데이터 3 데이터 4 데이터 5 최근 작성 항목 데이터 1 데이터 2 데이터 3 개발을 배우고 있는 어느 누군가가...
시맨틱 태그
댓글수 · 2023.03.21
시맨틱(semantic) 태그 # 시맨틱 태그 ㅁ 시맨틱은 '의미론적인'이라는 의미입니다. ㅁ 특정 태그에 의미를 부여해 웹 페이지를 만드는 것을 시맨틱 웹이라고 합니다. ㅁ 시맨틱 웹은 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹을 의미합니다. 1. header : 머리말을 의미합니다. 페이지 제목, 페이지 소개 등이 해당됩니다. 2. nav : 하이퍼링크들을 모아 놓은 네비게이션을 말합니다. 3. aside : 본문 흐름에 벗어나는 노트나 팁을 말합니다. 4. section : 문서의 장이나 절에 해당하는 내용을 말합니다. 5. article : 본문과 독립적인 콘텐츠 영역을 말합니다. 6. footer : 꼬리말을 의미합니다. 저작권, 저자 등이 해당됩니다. HTML 시맨틱 네비..
1 2 3 4 5 6 7

티스토리툴바