HTML35 CSS selector(선택자) 선언, 작성하는 방법 CSS Selector (선택자)란? CSS는 HTML문서를 화려하게 아름답게 만드는 언어라고 이전 글에서 설명한 적이 있습니다. [CSS] - HTML을 스타일리쉬하게 만드는 CSS HTML을 스타일리쉬하게 만드는 CSS CSS란? CSS(Cascading Style Sheets)는 HTML문서를 화려하고 아름답게 만들어주는 언어입니다. HTML 코드만으로는 시각적인 아름다움, 반응형 웹페이지를 만들수가 없기 때문에, CSS를 이용해서 글꼴, 색상, ITMAKEEASY.COM 다시 한번 CSS 구조를 살펴보면 아래와 같습니다. P 태그에 대하여 (선택자 정의) color는 (속성) blue로 표시해라 (속성값) 을 나타낸거에요. 이 때 P가 selector (선택자) 입니다. CSS에서 선택자는 전체 .. 2023. 7. 17. HTML audio , 오디오 컨텐츠를 웹페이지 넣을 수 있는 태그 AUDIO 태그란? HTML에서 audio 태그를 사용하면 오디오 콘텐츠를 웹페이지에 삽입할 수 있습니다. 오디오 콘텐츠란 음악, 음향 등을 말하는데요. MP3, WAV, OGG 등 확장자가 대표적입니다. 또한 태그는 시맨틱 구조를 만드는 요소이기도 합니다. 사용법 Your browser does not support the audio tag. 먼저 audio 태그를 엽니다. src 속성에 오디오 파일의 소스 URL을 지정합니다 controls : 이 속성을 넣으면 오디오 플레이어 컨트롤이 표시되어 사용자가 재생, 일시정지, 볼륨 조정 등을 처리할 수 있어요 autoplay : 웹페이지를 열때 자동으로 오디오를 재생합니다 muted : 이 속성을 쓰면 음소거를 할 수 있어요 preload : 웹페이지를 .. 2023. 7. 13. HTML Semantic (시맨틱) 이해하기 쉽고 검색이 잘되게 만드는 구조 시맨틱 구조란 무엇인가? 시맨틱 구조는 의미를 전달하고 웹페이지의 구조를 정확하게 보여주는 방법입니다. 아래 그림은 Codecademy를 공부하면서 나온 사례인데요. 좌측이 Non-Semantic, 우측이 Semantic 구조입니다. 왼쪽, 오른쪽을 비교하니까 우측은 박스만 보더라도 웹페이지 구성이 어떻게 되는지 대략적으로 알 수 있네요! 시멘틱에 필요한 태그 위의 그림을 코드로 구성해본 다른 예시입니다. 모든 시맨틱 태그를 사용하지는 않았네요. : 웹 페이지 상단에 있는 소개 콘텐츠를 묶습니다 : 탐색 링크, 메뉴가 포함된 섹션입니다 : body 영역 중 메인 콘텐츠 영역입니다 : body 영역 중 하단 정보영역(푸터)를 묶습니다 : main 영역을 다시 나누어 그룹화합니다 : section과 연관된 .. 2023. 7. 12. HTML textarea, 여러 줄의 텍스트를 입력하는 폼 생성 태그 TEXTAREA 태그란? HTML 태그는 여러 줄의 텍스트를 입력받을 수 있는 폼을 생성하는데 사용합니다. 이메일 폼을 만든다고 가정할 때 내용을 넣는 폼을 생각하면 이해가 빠릅니다. 사용법 New Blog Post: 과 태그를 엽니다 태그를 만듭니다 id, name : id는 해당 폼을 고유하게 식별하는데 사용하고, name은 해당 요소의 이름을 정의해서 서버로 데이터를 전송할 때 식별자로 이용합니다. id는 유일해야 하지만, name은 동일한 이름을 사용해서 묶을 수 있습니다. rows : 텍스트 입력할 수 있는 줄 수 입니다. cols : 텍스트를 입력할 수 있는 너비입니다. placeholder : 텍스트 입력란에 기본적으로 표시되는 임시 텍스트입니다 예시화면 See the Pen textarea.. 2023. 7. 11. 이전 1 2 3 4 ··· 9 다음
