이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 기본 선택자 사용 전체 선택자 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로, * 기호를 사용해 표시한다. 전체 선택자 전체 선택자는 모든 요소를 한 번에 선택할 수 있다. 태그 선택자 태그 선택자는 HTML 태그명으로 선택자를 지정하는 방법이다. 태그 선택자는 선택자에 지정된 태그명과 일치하는 모든 요소를 한 번에 선택한다. 안녕 하이 안녕 안녕 아이디 선택자 아이디 선택자는 HTML 태그에서 사용할 수 있는 id 속성 값을 이용해 선택자를 지정하는 방법이다. 이때 속성값 앞에는 # 기호를 붙여 구분한다. 안녕 id 속성값은 고유해야 한다...

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. CSS : Cascading Style Sheets 문법 형식 CSS 문법은 크게 선택자와 선언부로 구분한다. 선택자 : CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역 선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역, 중괄호 안에 작성 선언부에 작성하는 스타일은 반드시 속성과 값을 한 쌍으로 작성 값의 뒤에 세미콜론을 넣으면 여러 스타일을 연속해서 작성 가능 안녕 줄 바꿈과 들여 쓰기 CSS 코드를 작성할 때, 줄 바꿈과 들여 쓰기를 꼭 할 필요는 없다. 그러나 줄 바꿈과 들여쓰기를 적절하게 사용하면 코드의 가독성을 크게 향상할 수 있다. 스타일 시트 스..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 태그 종류 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성이 있는데, 이것이 바로 글로벌 속성이다 class 속성 class 속성은 요소에 클래스명을 지정할 때 사용한다. 클래스명은 CSS에서 클래스 선택자로 활용하고, 같은 클래스명은 여러 요소가 중복해서 가질 수 있다. ... id 속성 id 속성은 요소에 아이디를 지정할 때 사용한다. id는 CSS에서 아이디 선택자로 활용하며, 같은 HTML 문서 내에서 중복될 수 없다. ... style 속성 style 속성은 CSS 코드를 인라인으로 작성할 때 사용한다. ... title 속성 title 속성은 요소에 추가 정보를 넣을 때..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 시맨틱 태그란? 웹이 점차 발전하고 웹이 가진 정보의 가치가 높아지면서 사람이 아닌 기계도 쉽게 이해할 수 있도록 웹 페이지를 더욱 의미 있게 설계하는 일이 매우 중요해졌다. 이에 따라 새롭게 등장한 트렌드가 시맨틱 웹이다. 시맨틱 태그는 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그를 말한다. 대표적으로 table, form, a 태그등은 시맨틱 태그에 속하고, div, span 태그등은 논 시맨틱 태그에 속한다. table, form, a 태그는 HTML 문서의 구성 요소로는 적합할지 몰라도 전체 구조를 설계할만한 태그는 아니다. 그래서 웹 페이지의 구조를 설계하기..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. audio 태그 src 속성에 오디오 파일의 위치(URL)를 넣어주면 된다. controls 속성을 제거하면 오디오 컨트롤 패널이 보이지 않게 된다. video 태그 src 속성에 비디오 파일의 위치(URL)를 넣어주면 된다. controls 속성을 제거하면 비디오 컨트롤 패널이 보이지 않게 된다. source 태그 source 태그는 audio 태그와 video 태그에서 리소스(파일)의 경로와 미디어 타입을 명시하는 데 사용한다. source 태그는 멀티미디어 태그를 사용할 때 필수는 아니지만, 되도록 함께 사용하면 좋은 태그이다. audio 태그와 video 태그는 다양한 포맷을 지..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 표는 웹 페이지에서 흔하게 볼 수 있는 2차원 격자 형태로 구성된 데이터를 의미한다. 표는 행(row), 열(column) 그리고 행과 열이 만나는 셀(cell)로 구성된다. table 태그 HTML에서 표를 생성할 때는 table 태그를 사용한다. 폼과 마찬가지로 표 관련 태그는 table 태그 안에서 사용한다. summary 속성은 더 이상 사용하지 않는다. HTML5에서 공식적으로 summary 속성을 지원하지 않아 더 이상 사용하지 않는다. caption 태그 웹 접근성을 향상하는 방법의 하나로 표 제목을 지정한다. 표 제목은 caption 태그로 지정하므로 표를 만들 때는 반드..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 폼은 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다. 대표적으로 사용자로부터 아이디와 패스워드를 입력받아 처리할 때 폼을 이용한다. form태그 form 태그는 폼 양식을 의미하는 태그이다. 그래서 HTML의 폼을 구성하는 태그는 모두 form태그 안에 작성한다. action 속성 : action 속성에는 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL주소를 적는다. method 속성 : 입력받은 값을 서버에 전송할 때 송신 방식을 적는다. 속성값으로 get 또는 post를 사용할 수 있다. input 태그 로그인 페이지의..

이 글은 HTML+CSS+자바스크립트 웹표준의 정석(저자 : 고경희)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 텍스트 작성하기 태그 제목을 나타내는 태그이다. 웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다. 에서 n은 1~6까지 입력할 수 있고, 숫자가 작아질수록 글씨의 크기가 작아진다. 레드향 레드향 샐러드 레시피 상품 구성 검색 엔진은 hn태그를 검색할 때 h1 태그부터 단계적으로 검색한다. 만약 h4태그를 사용하지 않고 h5, h6태그를 사용한다면 검색 엔진은 h1부터 단계적으로 태그를 검색하다가 h4태그가 없으면 h5, h6태그를 검색하지 않는다. p태그 텍스트 단락을 만드는 태그, 줄을 바꾸는 태그이다. 와 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서..