Web/HTML&CSS6 HTML Semantic Elements Semantic Elements란? 기존 HTML에서는 영역을 나눌 때 div 태그만 사용하여 나누는 경우가 많았다. 하지만 검색 엔진이 HTML 문서를 수집하여 분석하거나, 시각장애인을 위해 스크린 리더 등 HTML 문서를 분석해야 할 여러 상황에서 각 영역이 어떤 영역인지 알아내기 힘들었다. 따라서 div와 같은 태그 대신 의미를 갖고 있는 태그가 탄생하게 되었고, 이런 태그들을 명시적 요소라는 뜻의 Semantic Elements라고 한다. ※ 다만 낮은 버전의 브라우저에서는 지원하지 않아 주의해야 한다. 기본적인 구성 컨텐츠 상단에는 header, 하단에는 footer를 배치하며, header 아래에 nav(navigation links)를 배치한다. section 혹은 article을 이용하여 .. 2021. 7. 16. 자주 사용되는 HTML 태그 정리 Heading This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 문서의 제목은 제목을 뜻하는 heading의 약자인 h에 숫자 1~6까지를 붙여 사용한다. 숫자가 작을수록 큰 제목을 나타내며 글자의 크기가 커진다. 또한 강조를 위해 두꺼운 폰트로 표시된다. Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur .. 2021. 7. 15. Media Query를 이용하여 반응형 웹 구현하기 Media Query란? 예전에는 웹 페이지를 PC 환경에서만 접근했지만, 요즘은 다양한 기기에서 웹 페이지에 접근하고 있다. 따라서 다양한 기기의 화면 크기에 따라 웹 페이지 내 컨텐츠의 크기를 조절할 필요가 있다. 이 때, 특정 조건에서만 CSS 코드를 적용시키는 Media Query를 사용하면 이를 구현할 수 있다. 사용 방법 위와 같이 CSS 부분에 @media(조건){내용} 형태로 적어주면 된다. 예를 들어 위 코드의 경우 window 너비가 800px 이상일 경우 div 태그를 보이지 않게 한다는 뜻이다. 너비가 800px가 넘어가면 div로 구분한 부분이 사라지는 것을 볼 수 있다. 이렇게 괄호 안의 CSS 코드가 실행될 최소 너비를 지정하는 것 뿐만 아니라 다음과 같이 다양한 조건이 가능하.. 2020. 8. 2. CSS Box Model이란? CSS Box Model이란? CSS 박스 모델은 HTML element가 웹 페이지에서 차지하는 공간을 정의한 모델이다. HTML element들은 각각 자신만의 영역을 갖고 있으며, 각 영역은 다시 여러개의 작은 영역으로 나뉜다. 각 element는 가운데 실제 element의 내용이 담긴 부분(content), element를 감싸는 경계(border), border와 content 사이의 영역(padding), border 바깥의 영역(margin)으로 구성된다. 각 영역들은 CSS의 property로 구현되어 있기 때문에 원하는 속성을 불러와 원하는 값을 넣어주면 된다. 이렇게 구현한 내용은 크롬에서 F12를 눌러 확인할 수 있다. 우리가 지정해준 CSS 속성들을 표시해줄 뿐 아니라 그림으로도 .. 2020. 7. 23. Cascading Style Sheets (CSS) CSS란? CSS는 HTML 만으로 표현할 수 있는 디자인의 한계를 극복하기 위해 만들어진 언어이다. 물론 새로운 디자인을 위해서 HTML에 새로운 태그를 추가하는 방법도 있다. 하지만 디자인의 한계 외에도 태그로 구성된 HTML 문법으로는 극복할 수 없는 한계가 존재한다. HTML CSS JavaScript 예를 들어 위와 같이 3개의 목록을 가진 리스트가 있다고 하자. 지금은 사용되지 않는 font 태그를 이용하여 각각의 아이템의 글자를 검은색으로 설정하였다. 이 때, 모든 아이템의 글자색을 빨간색으로 바꾸려면, 아이템 하나하나의 속성을 바꿔주어야 한다. 위 리스트의 경우, 아이템이 3개 뿐이기 때문에 짧은 시간 안에 바꿀 수 있지만, 아이템이 1억개라면 단순한 작업임에도 엄청난 시간이 소모될 것이다.. 2020. 7. 21. HyperText Markup Language (HTML) HTML이란? HTML은 웹 페이지를 작성하기 위한 언어이다. 따라서, 웹 페이지란 결국 HTML 문서라고 말할 수 있다. HTML 문서는 태그(Tag)라는 것들로 구성되는데, 기본적으로 태그 안의 것들을 설명하기 위한 꼬리표라고 볼 수 있다. 따라서 태그의 이름을 통해 어떤 용도인지를 알 수 있다. 또한, HTML 태그는 기본적으로 시작 태그와 종료 태그의 한 쌍으로 구성된다. 하지만 특수한 몇몇 태그의 경우 시작 태그만 사용하는 경우도 있다. 기본 구조 내용 첫번째 줄의 은 이 문서가 html 문서임을 나타낸다. 첫 줄을 제외하고 html 문서는 기본적으로 head 부분과 body 부분으로 구성된다. head 부분에는 인코딩 방식이나 문서 제목과 같은 문서에 관한 추가적인 정보를 작성하며, body .. 2020. 7. 20. 이전 1 다음
