홈페이지 만들기37 CSS 선택자(selector): 전체 선택자, tag 선택자, class 선택자, id 선택자 선택자(selector): 전체 선택자, tag 선택자, class 선택자, id 선택자 누구에게 스타일을 적용할지 정해주는 요소를 '선택자(selector)'라고 합니다. CSS에는 다양한 선택자가 있습니다. 오늘은 전체 선택자, tag 선택자, class 선택자, id 선택자에 대해 알아보겠습니다. 1. 전체 선택자(unviersal selector) - 위 예시는 내부 스타일 시트에 CSS를 작성하였습니다. - 즉 head 태그 안쪽에 style 태그를 삽입하여 CSS를 작성한 것입니다. - 전체 선택자는 모든 요소에 스타일을 적용할 때 사용합니다. - 전체 선택자로 '*' 별표를 사용합니다. - 전체 선택자는 주로 기본 스타일을 초기화할 때 사용합니다. - 웹브라우저마다 고유의 기본 스타일이 정해.. 2020. 11. 4. CSS란 무엇일까? CSS란 무엇일까? HTML이 집의 뼈대를 세우는데 사용하는 언어였다면, CSS는 집을 멋지게 꾸며주는 언어입니다. 뼈대 없이는 집을 지을 수 없듯이, HTML을 공부하지 않았다면 HTML 먼저 공부하고 CSS를 공부하시기 바랍니다. HTML이란? HTML이란? 1. HTML이란? - 홈페이지 만들기를 '집 짓기'로 비유해보겠습니다. - HTML은 집의 뼈대를 만드는 것과 같습니다. 바닥을 다지고, 철근 및 콘크리트로 집의 기본 구조를 잡는 것이지요. 2. HyperText Markup makinghome.tistory.com 1. CSS란 무엇일까? - CSS란 'Cascading Style Sheets'의 줄임말입니다. - Cascading은 '종속의', '위에서 아래로 흐르는'을 뜻합니다. - St.. 2020. 10. 29. HTML 시맨틱(semantic) 태그: header nav section article footer address aside (HTML 시맨틱 태그: header nav section article aside footer address '시맨틱(semantic)'이란 '의미의' 또는 '의미가 통하는'이라는 뜻입니다. 따라서 '시맨틱 태그'란 '의미적 태그' 정도로 해석할 수 있겠습니다. 시맨틱 태그는 특별한 기능은 없으나, 이 태그를 사용함으로써 페이지 구조를 더 쉽게 이해하게 할 수 있습니다. 시맨틱 태그는 주로 레이아웃을 짜는 데 많이 사용합니다. 어디가 머리말인지, 본문은 어디인지 등 시맨틱 태그를 활용해 컨텐츠들을 묶어줍니다. 이렇게 시맨틱 태그를 사용하면 프로그래머, 검색엔진, 시각장애인 등이 웹페이지를 한 눈에 이해할 수 있게됩니다. 1. header nav 태그 - header 태그는 머리말을 나타냅니다. - 웹페.. 2020. 10. 27. HTML audio video source 태그 HTML audio video source track 태그 오늘은 오디오와 비디오 파일을 삽입하는 방법을 알아보겠습니다. 1. audio 태그 - audio 태그는 오디오 파일을 삽입하는데 사용합니다. - 대부분의 브라우저에서는 가능하면 mp3 형식의 파일을 삽입합니다. - audio 태그는 src controls autoplay loop muted preload 속성을 가질 수 있습니다. - src 속성은 파일의 경로를 지정해줍니다. 필수요소입니다. - controls 속성을 지정하면 웹브라우저에 오디오를 제어하는 콘트롤 박스를 만들어줍니다. - 위 예시에서 초록색으로 표시해둔 부분이 controls로 나타난 부분입니다. - autoplay 속성을 지정하면 웹브라우저가 로드되었을 때 오디오를 자동으로 .. 2020. 10. 25. HTML select option optgroup textarea 태그 HTML select option optgroup textarea 태그 오늘은 폼 요소 중에 여러 데이터를 나열해 보여주고 선택할 수 있도록 해주는 태그를 배워보겠습니다. 1. select option - select와 option 태그를 사용하면 여러 데이터를 나열해 보여주고 선택하도록 하는 기능을 구현할 수 있습니다. - select 태그를 사용해 보여줄 데이터의 드롭다운 목록을 만들어줄 수 있습니다. - 드롭다운 목록이란 ▼를 클릭했을 때 데이터 목록을 아래쪽으로 쭈욱~ 펼쳐지게 하는 것을 말합니다. - select 태그는 size와 multiple 속성을 가질 수 있습니다. - size 속성은 화면에 드롭다운을 클릭하기 전에 한 번에 표시할 목록의 개수를 지정하는데 사용합니다. - size를 지정.. 2020. 10. 23. HTML label fieldset legend 태그, autofocus placeholder readonly required 속성 HTML label fieldset legend 태그, autofocus placeholder readonly required 속성 지난 시간에 배운 input 태그의 type 속성들 HTML 입력(input) 태그 type 속성: time datetime-local submit reset button HTML 입력(input) 태그 type 속성: time datetime datetime-local submit reset button 지난 시간에 배운 input태그의 type 속성들 HTML 입력(input) 태그 type 속성: hidden search url email tel radio checkbo.. makinghome.tistory.com 지난 시간에는 input 태그의 type 속성 중 ti.. 2020. 10. 22. 이전 1 2 3 4 5 6 7 다음 반응형
