aPOST

HTML 페이지의 기본 하이퍼링크 속성은 스타일이 좋지 않기로 유명합니다. 눈에 잘띄는 목적에는 잘 맞지만, 우리가 만드는 대부분의 웹 페이지에서는 전혀 어울리지 않습니다. 대부분 웹브라우저에서 표현하는 기본 하이퍼링크 스타일은 다음과 같습니다. 하이퍼링크의 기본 색상은 "진파랑", 방문한 링크의 색상은 "진보라" 입니다. 단, 이 값은 구글 크롬을 기준으로 한 것입니다. 웹 표준으로 정해진

여러 개의 글을 목록으로 미리보기를 하거나, 블로그 글 목록, 상품 설명 미리보기 목록, 게시판 글 목록 처럼 글 내용의 일부를 몇 줄 이내로 잘라서 보여줄 때 일정한 줄 수가 유지되도록 레이아웃을 만드는데 유용합니다. 서버 쪽에서 웹 프론트엔드가 전달받는 내용은 대부분 글자 수를 기준으로 내용을 자른 내용일 것이고, 영문, 한글이 혼합된

태그쌍 안의 폼 태그 요소들은 기본적으로 사용자와 상호반응해 입력/선택된 결과값을 서버에 전송해 영구적으로 저장을 하기 위한 태그들입니다.

태그는 폼 안에 포함된 필드 값들을 결국 서버에 있는 어딘가로 전송하기 위한 정보와 처리과정이 반드시 있게 됩니다. 태그의 속성(Attribute)들은 폼안의 어떤 값들을 어떤식으로 어디로 전송하겠다는 내용을 기본적으로 표시해야 합니다. 이런

현재 활성화된 입력 요소, 또는 활성화 된 특정 HTML 태그 요소를 눈에 잘 띄도록 표시해주는 기능으로 포커스 테두리 기능이 있습니다. 포커스는 키보드 탭 키를 이용해 HTML 하이퍼링크, 또는 폼 입력 요소(, )를 이동할 때 현재 활성 상태인(포커스가 위치한) 요소를 알려주는 역할을 하는 속성으로 모든 웹 브라우저에서 기본으로 지원되는 기능입니다.

CSS 테두리 선으로 삼각형 화살표 만들기 내용을 먼저 읽고 보면 이해가 쉽습니다. -> 테두리 선으로 삼각형 화살표 만들기 블록 요소의 테두리 선을 활용해 삼각형을 만들면, 만든 삼각형을 원하는 블록 요소 안에 넣은 후 위치를 잡는 배치 작업을 해야합니다. 원하는 위치를 잡는 과정은 마진(margin)과 "left", "top" 속성 등을 활용해

CSS 트릭을 활용하면 제한적이지만 삼각형 도형을 만들어 활용할 수 있습니다. 삼각형을 만드는 트릭은 두꺼운 상하좌우의 테두리선(border)을 맞붙여서 삼각형 형태를 만드는 것으로 다음과 같은 원리로 만들어집니다. .arrow-up{ width: 0; height: 0; border-left: 20px solid white; border-right: 20px solid white; border-bottom: 20px solid purple; } 위쪽 삼각형 화살표를 만드는 방식은 다음과

플렉스박스는 이름 그대로 레이아웃을 만들 때 아주 유연하고 동적인 구조를 유지할 수 있는 박스 모델입니다. 유연한 레이아웃을 유지하는 플렉스박스의 속성을 잘 활용하면 미디어쿼리 없이도 웹브라우저 너비와 다양한 디바이스에 대응하는 반응형 레이아웃을 만들 수 있습니다. 미디어쿼리를 이용한 CSS 속성 재정의보다 적은 CSS 작성으로 반응형 레이아웃을 만들 수 있기 때문에, 코드 유지보수

CSS 표준화가 어느정도 진행되면서 과거 자바스크립트로만 텍스트 선택 차단(드래그 차단, 더블클릭 차단)이 CSS 만으로도 가능해지게 되었습니다. 벤더 프리픽스(Vendor Prefix) 와 함께 사용하면 웹 브라우저에 무관하게 텍스트 선택을 차단할 수 있습니다. CSS 속성 중 텍스트 선택과 관련된 제어를 하는 속성은 "user-select" 속성입니다. 텍스트 테그에만 속성이 적용되며, 사용 가능한

플렉스박스의 유연한 레이아웃을 가능하게 하는 가장 중요한 속성 2가지가 "flex-grow" 와 "flex-shrink" 입니다. 두 속성은 "flex-basis" 속성으로 정한 플렉스박스 아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능을 합니다. 두 속성이 빈 여백, 또는 넘친 아이템 영역을 분배해서 레이아웃 영역 안에 아이템들이 배치되도록

입력 가능한 필드, 또는 선택 가능한 폼 요소에 가이드 텍스트를 표시하는 플레이스홀더(Placeholder) 는 HTML 에서는 태그 속성으로 표현을 하지만, CSS 입장에서는 가상 요소(Pseudo Element) 입니다. 따라서 CSS에서 플레이스홀더에 접근하려면 가상 요소 선택자를 이용해 접근해야 합니다. 다음과 같은 입력 요소의 플레이스홀더에 접근하려면 다음처럼 가상 요소 선택자를 이용해 접근할 수