HTML + CSS5 Semantic HTML semantic : 의미의, 의미가 있는 이라는 뜻의 영단어 HTML : 화면의 구조를 만드는 마크업 언어 Semantic HTML: HTML이 구조를 만드는 것을 넘어 의미를 갖도록 만드는 것 는 헤더의 역할을, 는 네비게이션 바 역할을 하는 등 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고있는 요소를 시맨틱 요소라고 한다. 🌈 시맨틱 HTML의 필요성 1. 개발자간 소통 대부분의 웹페이지는 와 으로만으로도 완성할 수 있다. 하지만 여러 명의 개발자가 웹 페이지를 개발하면서 와 으로만 HTML 코드를 작성한다면 각 요소가 어떤 기능을 하는지 전혀 파악 할 수 없다. 그렇기 때문에 주석을 작성해서 설명하거나 id 나 class 를 사용해서 일일이 표기해야 하고, 그 이름과.. 2022. 9. 5. CSS 셀렉터 [셀렉터] 1. 전체 셀렉터(universal selector) 문서의 모든 요소를 선택 * { } 2. 태그 셀렉터 같은 태그명을 가진 모든 요소를 선택 (복수 가능) h1 { } div { } section, h1 { } 3. ID 셀렉터 #id #only { } 4. class 셀렉터 .class 같은 class를 가진 모든 요소를 선택한다. .widget { } .center { } 5. attribute 셀렉터 같은 속성을 가진 요소를 선택 a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { } 6. 자식 셀렉터 자.. 2022. 7. 24. CSS 박스모델 [박스모델] 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스라 한다. 1. block 박스 줄 바꿈이 되는 박스. , width, height 속성이 사용 가능하다. https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements 2. inline 박스 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스. width, height 속성이 사용 가능하지 않다. inline 박스의 너비는 콘텐츠가 차지하는 너비가 결정하게 된다. https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements 3. inline-block 박스 두 가지 박스 종류.. 2022. 7. 24. CSS 속성 [CSS] 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. CSS는 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다. CSS를 사용한 페이지는 HTML만 이용한 페이지보다 가독성이 좋다. 사용자 인터페이스(UI; user interface) 인터넷으로 옷을 구매하기 위해서는 쇼핑몰에 들어가 마음에 드는 옷을 누르고 구매하기 버튼을 눌러 구매하면 된다. 사실 더 복잡한 과정이 필요하지만 사용자는 구매하기 버튼을 누르는 것만으로 해결할 수 있다. 이것이 바로 UI이다. 사용자 경험(UX; user experience) 이러한 UI를 바탕으로 사용자의 편의성과 가독성을 도와주는 것이 UX이다. [CSS 속성] 셀렉터는 요소 이름이나 id, 또는 클래스를.. 2022. 7. 12. HTML 기본 개념 HTML - 구조. 웹페이지의 틀을 만드는 마크업 언어 CSS - 스타일. 웹페이지를 꾸미려고 작성하는 스타일시트 언어 JavaScript - 기능. 객체 기반의스크립트프로그래밍 언어 [HTML 특징] 웹페이지의 틀을 만드는 마크업 언어이다. HTML은 태그(Tag: 부등호())들의 집합이다. HTML은 트리구조로 이루어져 있다. 로 연 태그를 으로 닫을 수 없다. 태그에는 src, style등의 속성을 담을 수 있다. [HTML의 요소] 태그를 제외한 나머지 영역을 요소라 한다. 태그와 요소는 같지 않다. 태그는 소스 코드에서 요소의 시작과 끝을 표시를 뜻한다. 요소는 브라우저가 페이지를 표시할 때 사용하는 문서 모델인 DOM의 일부를 뜻한다. [태그의 종류] 1. div 콘텐츠의 길이와 상관없이 한 .. 2022. 7. 5. 이전 1 다음
