본문 바로가기
반응형

HTML&CSS

CSS 로 하이퍼링크 기본 스타일 초기화 하기 0 2020. 12. 4. HTML 페이지의 기본 하이퍼링크 속성은 스타일이 좋지 않기로 유명합니다. 눈에 잘띄는 목적에는 잘 맞지만, 우리가 만드는 대부분의 웹 페이지에서는 전혀 어울리지 않습니다. 대부분 웹브라우저에서 표현하는 기본 하이퍼링크 스타일은 다음과 같습니다. 하이퍼링크의 기본 색상은 "진파랑", 방문한 링크의 색상은 "진보라" 입니다. 단, 이 값은 구글 크롬을 기준으로 한 것입니다. 웹 표준으로 정해진 것이 아니라 웹 브라우저에서 기본 값으로 제공되는 것이기 때문에 웹 브라우저에 따라서는 색상이 약간씩 다를 수 있으므로 불변하는 절대 색상이 아닙니다. :link { color: #0000EE; } :visited { color: #551A8B; } 이 두 가상 클래스를 제외한 "hover", "active" 가상 ..
CSS로 글의 내용 표시 행 수를 제한하기 0 2020. 12. 4. 여러 개의 글을 목록으로 미리보기를 하거나, 블로그 글 목록, 상품 설명 미리보기 목록, 게시판 글 목록 처럼 글 내용의 일부를 몇 줄 이내로 잘라서 보여줄 때 일정한 줄 수가 유지되도록 레이아웃을 만드는데 유용합니다. 서버 쪽에서 웹 프론트엔드가 전달받는 내용은 대부분 글자 수를 기준으로 내용을 자른 내용일 것이고, 영문, 한글이 혼합된 경우가 많습니다. 미리보기 내용을 2줄로 출력할 경우 글자 수가 같아도 어떤 경우에는 2줄, 어떤 경우에는 3줄이 되기도 하고, 4줄이 될 때도 있습니다. 줄 수가 들쑥 날쑥한 것을 그대로 출력하면 레이아웃이 순차적으로 밀리거나, 하단에 일정하지 않는 여백이 남는 그다지 보기좋지 않은 웹 페이지를 보여주게 됩니다. CSS의 텍스트 속성들을 잘 사용하면 일정한 줄 수로 ..
CSS로 요소(Element)의 포커스 테두리 없애기 0 2020. 12. 4. 현재 활성화된 입력 요소, 또는 활성화 된 특정 HTML 태그 요소를 눈에 잘 띄도록 표시해주는 기능으로 포커스 테두리 기능이 있습니다. 포커스는 키보드 탭 키를 이용해 HTML 하이퍼링크, 또는 폼 입력 요소(, )를 이동할 때 현재 활성 상태인(포커스가 위치한) 요소를 알려주는 역할을 하는 속성으로 모든 웹 브라우저에서 기본으로 지원되는 기능입니다. 해당 요소에 포커스가 위치하면 요소를 활성 상태로 표시하기 위해 "outline" 속성이 기본 적용됩니다. "outline" 속성은 테두리 속성(border)와 같은 속성을 가지지만, 테두리 선 외곽에 위치하며, 자리를 차지하지 않습니다. "outline" 기본 속성 값은 CSS로 커스터마이징 할 수 있습니다. 사용자 가이드 기능으로 필수인 기능이지만, ..
CSS 가상 요소를 활용해 삼각형 화살표 만들기 0 2020. 12. 3. CSS 테두리 선으로 삼각형 화살표 만들기 내용을 먼저 읽고 보면 이해가 쉽습니다. -> 테두리 선으로 삼각형 화살표 만들기 블록 요소의 테두리 선을 활용해 삼각형을 만들면, 만든 삼각형을 원하는 블록 요소 안에 넣은 후 위치를 잡는 배치 작업을 해야합니다. 원하는 위치를 잡는 과정은 마진(margin)과 "left", "top" 속성 등을 활용해 어렵지 않게 붙일 수 있지만, HTML에 태그가 추가되고, 위치를 잡는데 필요한 CSS를 더 작성해서 관리를 해야 합니다. 가상 요소(Pseudo Element) 를 활용하면 별도의 태그 추가 없이도 삼각형을 부착하고 싶은 대상에 바로 붙일 수 있기 때문에 여러가지 번거로운 작업을 줄일 수 있습니다. 가상 요소를 활용해 삼각형 화살표를 만드는 원리는 다음과 같..
CSS 테두리 선으로 삼각형 화살표 만들기 0 2020. 12. 3. CSS 트릭을 활용하면 제한적이지만 삼각형 도형을 만들어 활용할 수 있습니다. 삼각형을 만드는 트릭은 두꺼운 상하좌우의 테두리선(border)을 맞붙여서 삼각형 형태를 만드는 것으로 다음과 같은 원리로 만들어집니다. .arrow-up{ width: 0; height: 0; border-left: 20px solid white; border-right: 20px solid white; border-bottom: 20px solid purple; } 위쪽 삼각형 화살표를 만드는 방식은 다음과 같습니다. 상단 화살표 외에 각 방향으로 화살표를 만들어 사용할 수 있습니다. .arrow-up{ width: 0; height: 0; border-bottom: 20px solid purple;/* 화살표 */ bor..
CSS 텍스트영역(<textarea>) 크기 조절 차단하기 0 2020. 12. 3. 입력 폼 필드 중 텍스트영역()은 자동 크기 조절 속성이 있기 때문에 웹페이지에서 텍스트영역의 크기를 사용자가 조정할 수 있습니다. 기본 크기가 너무 작거나, 입력할 내용이 많아서 큰 텍스트 영역을 필요하면 마우스 드래그로 오른쪽 아래의 컨트롤을 당겨서 크기를 더 늘릴 수 있습니다. 텍스트영역() 의 크기 조절이 되지 않도록 막으려면 다음처럼 텍스트영역에 "resize" 속성을 부여하면 됩니다. textarea{ resize: none; } "none" 속성을 부여한 텍스트영역은 영역 오른쪽 하단의 크기 조절 컨트롤이 사라지고 처음 정해진 크기로만 표시됩니다. "resize" 속성 값은 "both", "horizontal", "vertical", "none" 4가지가 가능하며, 속성 값 그대로 양방향 크..
CSS 플레이스홀더(placeholder) 스타일 정의하기 0 2020. 12. 3. 입력 가능한 필드, 또는 선택 가능한 폼 요소에 가이드 텍스트를 표시하는 플레이스홀더(Placeholder) 는 HTML 에서는 태그 속성으로 표현을 하지만, CSS 입장에서는 가상 요소(Pseudo Element) 입니다. 따라서 CSS에서 플레이스홀더에 접근하려면 가상 요소 선택자를 이용해 접근해야 합니다. 다음과 같은 입력 요소의 플레이스홀더에 접근하려면 다음처럼 가상 요소 선택자를 이용해 접근할 수 있습니다. 가상 요소 선택자로 선택한 플레이스홀더는 HTML 텍스트에 적용하는 텍스트 스타일 속성을 그대로 사용할 수 있습니다. input[name=userid]::-ms-input-placeholder { /* 인터넷 익스플로러 */ color: #a00; font-size: 0.9375em; } i..
CSS 텍스트 선택 차단하기 0 2020. 12. 3. CSS 표준화가 어느정도 진행되면서 과거 자바스크립트로만 텍스트 선택 차단(드래그 차단, 더블클릭 차단)이 CSS 만으로도 가능해지게 되었습니다. 벤더 프리픽스(Vendor Prefix) 와 함께 사용하면 웹 브라우저에 무관하게 텍스트 선택을 차단할 수 있습니다. CSS 속성 중 텍스트 선택과 관련된 제어를 하는 속성은 "user-select" 속성입니다. 텍스트 테그에만 속성이 적용되며, 사용 가능한 속성 값은 다음과 같습니다. 참고로 사용자가 텍스트 선택을 위해 할 수 있는 "텍스트 선택 동작"은 마우스 드래그, 마우스 더블 클릭, 마우스 트리플 클릭, 컨텍스트 선택(마우스 오른쪽 버튼 클릭으로 선택 영역 선택), 키보드 "Ctrl + A" 동작입니다. 속성 값 설명 none 요소 안의 텍스트 내용과..
CSS 플렉스박스(flex) flex-grow와 flex-shrink 속성의 완벽 이해 0 2020. 12. 2. 플렉스박스의 유연한 레이아웃을 가능하게 하는 가장 중요한 속성 2가지가 "flex-grow" 와 "flex-shrink" 입니다. 두 속성은 "flex-basis" 속성으로 정한 플렉스박스 아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능을 합니다. 두 속성이 빈 여백, 또는 넘친 아이템 영역을 분배해서 레이아웃 영역 안에 아이템들이 배치되도록 하는 방식에 대해서 알아보겠습니다. flex-grow 속성이 남는 행 여백을 분배해서 채우는 방법 flex-grow 속성이 적용되지 않거나, 속성 값이 "0" 인 경우 레이아웃 너비보다 아이템들의 너비 합이 더 작으면 아이템 오른쪽 끝에 여백이 남게 됩니다. 다음과 같..
CSS 플렉스박스(flex)로 반응형 레이아웃 만들기 0 2020. 12. 2. 플렉스박스는 이름 그대로 레이아웃을 만들 때 아주 유연하고 동적인 구조를 유지할 수 있는 박스 모델입니다. 유연한 레이아웃을 유지하는 플렉스박스의 속성을 잘 활용하면 미디어쿼리 없이도 웹브라우저 너비와 다양한 디바이스에 대응하는 반응형 레이아웃을 만들 수 있습니다. 미디어쿼리를 이용한 CSS 속성 재정의보다 적은 CSS 작성으로 반응형 레이아웃을 만들 수 있기 때문에, 코드 유지보수 또한 더 단순하고 효율적으로 할 수 있습니다. 플렉스박스로 레이아웃을 만들기 위해서는 몇 가지 중요한 플렉스박스 속성에 대해 알아야 합니다. 레이아웃을 만드는 플렉스박스 속성들 "display: flex;"를 선언한 요소를 플렉스박스, 또는 플렉스박스 컨테이너 라고 하며, 플렉스박스 요소들을 담는 그릇의 역할을 합니다. 플렉..
배경에 적용한 svg 이미지가 CSS background-size 속성이 적용되지 않을 때 해결하는 방법 0 2020. 11. 29. 배경 이미지를 영역 크기에 맞춰 전체 영역을 채울 때는 background-size: 100% 100%; 속성을 태그에 부여하면 됩니다. 영역 크기와 배경에 적용한 이미지의 종횡비(Aspect ratio)가 맞지 않는 경우 이미지의 종횡비를 무시하고 이미지를 늘려서 채우지만, SVG 이미지는 비트맵 이미지와 달리 이미지가 늘어나지 않습니다. SVG 이미지는 기본 설정으로 종횡비가 유지되도록 되어있기 때문에 그래픽 프로그램에서 저장한 SVG 이미지를 태그 배경 이미지로 붙이면 "background-size" 속성이 적용되지 않고 종횡비가 그대로 유지됩니다. SVG 이미지의 종횡비가 무시되도록 하려면 SVG 이미지를 텍스트 편집기에서 연 후 preserveAspectRatio="none" 속성을 태그 안에 ..
CSS 플렉스박스(flex)와 마진(margin)으로 반응형 메뉴 만들기 0 2020. 11. 28. CSS 속성 중 블록 요소에 여백을 추가하는 속성은 패딩(padding) 과 마진(margin) 이 있습니다. 그중 마진(margin) 속성은 요소의 외곽에 여백을 설정하는 속성입니다. 그리고, 마진(margin) 속성에는 패딩(padding) 속성에는 없는 "auto" 속성 값 추가로 있습니다. 이 "auto" 속성 값이 레이아웃을 배치하는데 여러가지 마법을 만들어 냅니다. 특히 상하좌우에 남는 공간이 자동으로 배분되기 때문에 "auto" 속성은 레이아웃을 만드는 복잡한 과정을 단순화 해주는 장점이 있습니다. 마진 속성을 사용해 메뉴에 여백을 배치하는 방법을 먼저 알아 보겠습니다. 마진으로 플렉스박스 아이템 여백 배분하기 "auto" 속성 값은 동위 요소들에 부여된 "auto" 갯수만큼 남는 여백을 배..
반응형
닫기

티스토리툴바