앞에서 잠시 살펴 보았던 선택자에 대해서 알아보자 선택자의 종류에 대해 간단하게 알아보고 뒤에서 상세하게 다뤄보자 1. 기본 선택자 전체 선택자, 요소 선택자 클래스 선택자, 아이디 선택자, 속성 선택자 2. 결합자(Combinators) 자손 결합자, 자식 결합자 일반 형제 결합자, 인접 형제 결합자 3. 의사 클래스/요소 (Pseudo Class) 링크, 동적 의사 클래스 구조적 의사 클래스, 기타 의사 클래스, 의사 엘리먼트, 속성 선택자 vscode에서 쳐보며 어떻게 동작하는지 눈으로 확인해보자! 전체 선택자는 *을 이용하여 HTML의 모든 텍스트에 적용 요소 선택자는 직접 HTML 태그를 선택하여 그 태그에만 적용 아이디(id) 선택자는 #문자로 시작하며, 해당 아이디가 적용된 항목을 선택하여 ..

저번 시간까지 HTML을 이용하여 웹의 뼈대를 구성하는 방법에 대해 배웠다. 이번 시간부터는 표현을 하기위한 CSS에 대해 배워볼 것인데 개인적으로는 글을 읽으며 실습을 하는 것을 추천한다! Cascading Style Sheets = CSS 우리가 자주 사용하는 Naver의 경우 CSS가 없다면 보기가 정말 불편하고 이용하고 싶은 마음이 뚝 떨어진다. CSS를 배우지 않았지만 얼마나 중요한 것인지 알 수 있다. 이처럼 CSS는 스타일을 지정하기 위한 언어이다. 선택자를 통해 스타일을 지정할 HTML 요소를 선택 중괄호 안에서는 속성의 값, 하나의 쌍으로 이루어진 선언을 진행 각 쌍은 선택한 요소의 속성, 속성에 부여할 값을 의미 속성 (Property) : 어떤 스타일 기능을 변경할지 결정 값 (Val..

이번 글에서는 여러 요소들에 대해 배우며, 실습을 통해 직접 HTML의 뼈대를 만들어보자! 우선, HTML의 요소는 크게 인라인 / 블록 요소로 나누게 되는데 CSS에 들어가서 자세한 내용을 배우기 때문에 대충 넘어가자. 인라인 요소 : 글자처럼 취급 블록 요소 : 한 줄 모두를 사용한다. 먼저, 보고 있는 이 문장을 다루는 텍스트 요소에 대해 먼저 알아보자. : href 속성을 활용하여 다른 URL로 연결하는 하이퍼링크 생성 , : 굵은 글씨 요소 -> 중요한 강조하고자 하는 요소 , : 기울임 글씨 요소 -> 중요한 강조하고자 하는 요소 : 텍스트 내에 줄 바꿈 생성 : src 속성을 활용하여 이미지 표현 의미 없는 인라인 컨테이너 위의 리스트와 같이 전체 틀을 다루는 그룹 컨텐츠를 알아보자. : 하..

이번 글에서는 시맨틱 태그라고 불리는 아주 중요한 내용을 다뤄보자! 시맨틱 태그는 HTML 태그가 특정 목적, 역할 및 의미적 가치(semantic value)를 가지는 것이다! ex) 앞의 글에서 보았던 태그는 "이 페이지에서 최상위 제목"인 텍스트를 감싸는 역할(또는 의미)을 나타낸다. Non semantic 요소로는 div, span 등이 있으며, a, form, table 태그들도 시맨틱 태그로 볼 수 있다. HTML5에서는 기존에 단순히 콘텐츠의 구획을 나타내기 위해 사용한 div 태그를 대체하여 사용하기 위해 의미론적 요소를 담은 태그들이 추가되었다 위의 이미지에 나와있는 대표적인 시맨틱 태그 목록을 살펴보자! header : 문서 전체나 섹션의 헤더(머리말 부분) nav : 네비게이션(목록 ..

앞서 알아보았던 Web을 구조화, 즉 작성하기 위한 언어이다. HTML은 Hyper Text Markup Language의 약어이다. 대체 이게 뭘까? Hyper Text 참조(하이퍼링크)를 이용하여 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 문서와 문서를 이을 수 있는 기술 MarkUp language 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어 제목, 내용와 같이 구성 본격적인 내용에 들어가기 전에 HTML의 기본 구조를 파악하고 가보자! html: 문서의 최상위(root) 요소 head: 문서 제목, 인코딩, 스타일, 외부 파일 로딩 등 일반적으로 브라우저에 나타나지 않는 내용으로 구성 body: 실제 화면 구성과 관련된 내용으로 구성 위의 사진을 보면 HTML은 전부 요소(..

Web이란? 웹 페이지는 여러 가지 정보들을 담고 있는 링크들이 존재하고, 링크들을 통해서 여러 웹 페이지들을 연결한 것이 웹 사이트이다. 즉, 브라우저를 통하여 접속하는 웹 페이지(문서)들의 모음이 웹 사이트이다. 구성요소는 크게 3가지로 구분된다. HTML - 웹 페이지의 구조를 담당 CSS - 웹 페이지를 표현 Javascript - 웹 페이지의 동작을 구성한다. 앞으로 이 3가지에 대해서 자세히 알아보자! 웹 표준 우리가 흔히 아는 Chrome, firefox, edge 등의 브라우저들의 동작이 서로 달라 문제가 생기는 경우가 많은데 이를 파편화라고 부른다. 파편화를 해결하기 위하여 웹에서 표준적으로 사용되는 기술이나 규칙을 정의해놓은 것이 바로 웹 표준 크로스 브라우징 : 어떤 브라우저든 웹 페..