가치투자자

시멘틱 태그 (Semantic Tag) 1. 시멘틱 태그란? 혹시 여러분은 검색의 원리가 어떻게 되는지 알고 있나요? 검색엔진(Search Engine)은 매일 여러 웹 페이지의 정보를 크롤링하여 수집하고, 그 정보에다가 이용자들이 검색할 만한 키워드에 맞게 인덱스(index)를 붙여주는 인덱싱 작업을 한다. 이때 이용자들이 검색하는 사이트들이 HTML 문서이기에 검색 엔진은 HTML 코드를 기반으로 웹 사이트의 컨텐츠를 분석하고 인덱싱한다. 예시를 통해 좀 더 이해도를 높여보자. 아래 두 코드 모두 제목을 만들기 위한 코드고, 겉으로 보이는 결과물도 유사하지만 검색 엔진은 서로 다르게 인식한다. 첫 번째 코드는 제목 요소(h1 태그)로 인식되지만, 두 번째 코드는 32px 크기의 요소로 받아들여진다. ..

position 속성 1. position이란? position 은 레이아웃에서 요소를 어떻게 위치시킬지 결정해주는 프로퍼티(속성)다. 좌표 프로퍼티(top, bottom, left, right)와 함께 사용하여 위치를 정해줄 수 있다. position 속성을 사용하기 위한 문법은 다음과 같다. position: 속성값; 이제 position 속성에서 사용할 수 있는 속성값에 대해 살펴보자. 2-1. static (기본 위치) static 은 position의 기본 속성값으로, position 속성을 사용하지 않았을 때와 같다. html 코드의 순서대로 위에서 아래로, 왼쪽에서 오른쪽 순으로 배치가 된다. 이 속성값은 이미 설정된 position을 무력화히기 위해 사용될 수 있다. 좌표 프로퍼티(top,..

display 속성 브라우저에서 각 요소들을 어떻게 배치할지에 따라 디자인뿐만 아니라 사용성도 달라진다. 사용자들이 자주 찾는 기능들이 눈에 잘 띄는 곳에 깔끔하게 배치되어 있어야 편리하다고 느끼고 그 서비스를 더 자주 쓸 것이기 때문이다. 이와 관련하여 대표적으로 사용되는 css 속성인 display에 대해 살펴보고자 한다. 1. display란? display 는 레이아웃에서 요소들을 어떻게 보여줄지 결정해주는 프로퍼티(속성)다. display 속성을 사용하기 위한 문법은 다음과 같다. display: 속성값; 모든 요소는 기본적으로 display 속성을 가지고 있으며, 각 요소들이 가진 기본 속성값에 따라 배치가 된다. display의 대표적 속성값에는 다음과 같은 것이 있다. block : blo..

선택자 (Selector) 이 글은 선택자와 연장선에 있는 글이다. 선택자에 대해 아직 잘 모르겠다면, 아래의 글을 먼저 읽고 오자. https://valueengine.tistory.com/40 [CSS] 선택자 선택자 (Selector) 우리가 원하는 UI를 만들기 위해 HTML에 스타일(디자인, 레이아웃 등)을 적용해줘야 한다. 이때 HTML 문서에서 우리가 원하는 요소에만 CSS를 적용하기 위해 선택자(selector) 가 필요하 valueengine.tistory.com 3. 가상 클래스 선택자 (Pseudo-Class Selector) 우리가 어떤 요소에 스타일을 적용하기 위해 클래스를 만들 수 있다. 그러나 우리가 따로 만들지 않아도 존재하는 클래스가 바로 가상 클래스다. 가상 클래스 는 어..

선택자 (Selector) 우리가 원하는 UI를 만들기 위해 HTML에 스타일(디자인, 레이아웃 등)을 적용해줘야 한다. 이때 HTML 문서에서 우리가 원하는 요소에만 CSS를 적용하기 위해 선택자(selector) 가 필요하다. 먼저, 선택자에 CSS를 적용하는 방법부터 살펴보겠다. 예를 들어, h1 태그에 12px 크기의 빨간색 글씨로 CSS를 적용하고 싶을 때, 아래처럼 선택자 뒤에 {}를 써주고, 그 안에 우리가 원하는 스타일을 객체 형태(프로퍼티와 값)로 적어주면 된다. 1. 기본 선택자 1-1. 전체 선택자 (Universal Selector) HTML 문서 내의 모든 요소를 선택하는 선택자다. 별표(*) 로 모든 HTML를 선택할 수 있다. 아래 예시처럼 head 태그를 포함해 모든 요소에 ..

Flex (플렉스) 프론트엔드가 되기 위해선 레이아웃 배치를 잘 구현할 수 있어야 한다. 어떻게 요소들을 배치, 정렬하느냐에 따라 사용자가 보는 UI의 직관적인 느낌과 기능의 효율성이 달라지기 때문에 레이아웃 방식에 대해 제대로 공부해둘 필요가 있다. 1. Flex란? 이전에는 float나 inline-block 등을 이용해 레이아웃을 만들었지만, UI를 구성할 요소들의 사이즈가 불명확하거나 화면이 동적으로 변할 때도 유연하게 대응할 수 있는 기능을 제공하는 레이아웃 방식이 Flex다 Flex는 Flexible Box 또는 Flexbox 라고 불리기도 한다. 1-1. 부모 요소 flex container와 자식 요소 flex item 1 2 3 Flexbox 레이아웃은 flex item 이라 불리는 자식..