CSS3 썸네일형 리스트형 [CSS] 벤더 프리픽스 알아보기 (Vender Prefix) 이전 크로스 브라우징 포스트에서 Vender Prefix에 대한 이야기가 나왔습니다 오늘은 이에 대해 더 자세히 알아보도록 하겠습니다 CSS들을 사용할 때 최신 브라우저에서는 대부분의 CSS를 지원하고 있지만 오래된 브라우저에서는 지원하지 않는 경우도 있습니다 벤더 프리픽스 (Vender Prefix) prefix는 접두사라는 의미 아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른방식으로 지원되므로 접두사를 붙여 브라우저별로 구분 css 미지원 브라우저 기본 속성 초기 모던 브라우저 prefix 붙여서 속성 작성 최신 모던 브라우저 접두사 없이 속성 작성 접두사 종류 접두사 호환 브라우저 -webkit- 사파리, 크롬 -moz- 모질라, 파이어 폭스 -o- 오페라 -ms- 인터넷 익스플로저 TIP! .. 더보기 [HTML/CSS] 크로스 브라우징 알아보기 (Cross Browsing) 구인구직을 하다 보면 크로스브라우징을 고려할 수 있는 사람이라는 요건을 적은 회사들이 많습니다 그럼 이 크로스브라우징이 무엇인지 알아보록 하겠습니다 크로스 브라우징 (Cross Browsing) W3C의 웹 표준을 활용해 웹 사이트를 제작하여 모든 브라우저에서 깨지지않고 의도대로 표현되게 하며, 다양한 웹 브라우저에서 브라우저에 상관없이 사용자가 받는 정보가 동등하게 하는 것 크로스 브라우징을 해야 하는 이유 Source: StatCounter Global Stats - Browser Market Share 그래프를 보면 각 브라우저의 점유율을 확인했을 때 70%의 사용자가 크롬을 이용 크롬을 기준으로 코딩을 할 경우 다른 브라우저에서는 표현이 되지 않을 수 있어 이 다른 브라우저를 사용하는 30%의 사.. 더보기 [HTML/CSS] 배경 삽입하기 (Background) 웹 바탕을 꾸며는 배경을 넣는 방법에 대해 알아보도록 하겠습니다 배경 관련 속성 1. background-color 배경에 색을 지정하는 속성 기본 문법 예시 background-color : transparent | ; 속성 값 설명 기타 transparent 투명 배경 기본값 원하는 컬러 지정 16진수, RGB, color name 등 TIP! background-color 속성을 예외적으로 자식요소에 상속이 되지 않습니다 위와 같이 보이는 이유는 상속되어서가 아니라 요소의 배경색 기본값이 투명이기 때문입니다 2. background-image 배경에 이미지를 삽입하는 속성 기본 문법 예시 background-image : none | url ('이미지 경로') ; 속성 값 설명 기타 none 배경이.. 더보기 [HTML/CSS] 그림자 효과 만들기 (Text-Shadow, Box-Shadow) 코딩으로 그래픽 효과처럼 만들 수 있는 방법 중 하나로 텍스트나 요소에 그림자를 주어 꾸며줄 수 있습니다 텍스트 그림자 효과주기 text-shadow 기본 문법 예시 text-shadow : none | 속성 값 기능 기타 none 그림자 없음 기본값 *가로 거리 (hoff) 텍스트와 그림자 사이의 가로 거리 양수 값 : 글자의 오른쪽 음수 값 : 글자의 왼쪽 *세로 거리 (voff) 텍스트와 그림자 사이의 세로 거리 양수 값 : 글자의 아래쪽 음수 값 : 글자의 위쪽 번짐 정도 (blur) 그림자가 번지는 정도 양수 값 : 글자 밖 음수 값 : 글자 안 기본값 : 0 색상 그림자 색상 현재 글자색이 기본값 텍스트에 기본 그림자 효과주기 예시 See the Pen Untitled by haru (@har.. 더보기 [HTML/CSS] 박스 모델 알아보기 & 관련 속성 알아보기 (Box Model) 콘텐츠를 박스 형태로 정의 하는 방법을 박스 모델이라고 합니다 요소들을 원하는 위치에 배치하기 위해서는 박스 모델에 대해서 알아야 합니다 박스 모델에 대하여 알아보기 전에 블록 레벨 요소와 인라인 레벨 요소에 대하여 알아야 합니다 관련 포스트 [HTML] 블록 레벨 요소(Block Level Element)와 인라인 레벨 요소 (Inline Level Element) 박스 모델 (Box Model) 박스 형태의 콘텐츠로 이와 같은 형태인 요소를 박스 모델 요소라 함 블록 레벨 요소는 전부 여기에 속함 박스 모델 구성 분류 콘텐츠 영역 (contents) 패딩 (padding) 테두리 (border) 마진 (margin) TIP! 박스의 기본 값 상태를 static 상태라고 합니다 박스 모델 구성 요소 ●.. 더보기 [CSS] 테두리 만들기 (Border) 테두리는 박스 요소뿐만 아니라 다양한 요소에 넣을 수 있습니다 테두리 기본 속성 ● border-style 테두리 스타일을 지정하는 속성 기본 문법 예시 border-style : none | solid | dashed | dotted | double 속성 값 설명 기타 none 선을 표시하지 않음 기본값 solid 실선으로 표시 dashed 짧은 선으로된 점선으로 표시 dotted 점선으로 표시 double 두 줄로 표시 두 줄 사이의 간격은 border-width로 지정 이 외에 속성값 알아보기 ● border-width 테두리 두께를 지정하는 속성 기본 문법 예시 border-width : | thin | medium | think border-top-width : | thin | medium | .. 더보기 [CSS] 텍스트 스타일 알아보기 2 (TEXT) 전 포스트는 텍스트 스타일 중 글자, 단어와 돤련된 속성들이였습니다 이번에는 문단과 관련된 속성들에 대하여 알아보겠습니다 텍스트 스타일 관련 속성 1. text- align 글의 수평 정렬을 지정하는 속성 기본 문법 예시 text-align : left | right | center | justify 2. text- align-last 선택한 요소에서 마지막 라인만 수평 정렬 지정하는 속성 기본 문법 예시 text-align : auto | left | right | center | justify 속성 값 기능 left 좌측 정렬 right 우측 정렬 center 가운데 정렬 justify 양쪽 정렬 3. direction 글을 쓰는 방향을 지정하는 속성 기본 문법 예시 direction : ltr | .. 더보기 [CSS] 텍스트 스타일 알아보기 (TEXT) 이전에 포스트한 적 있지 않나? 라고 생각하실 수 있겠지만 폰트 스타일과 텍스트 스타일은 다른 개념입니다 폰트 스타일은 글꼴, 폰트와 관련된 개념이였다면 텍스트 스타일은 글자, 단어그리고 문단과 관련된 개념입니다 텍스트 스타일 관련 속성 1. color 글자에 색을 지정하는 속성 기본 문법 예시 color : color-name | 16진수 | rgb | hsl 2. text-decoration 텍스트에 장식줄 표시하는 속성 기본 문법 예시 text-decoration : 속성 기능 속성 값 기능 기타 text-decoration-line 선의 위치 지정 none 밑줄 없음 기본값 underline 밑줄 표시 링크 기본값 overline 윗줄 표시 line-through 가로지르는(취소줄) 표시 text.. 더보기 [CSS] 절대 크기와 상대 크기 알아보기 CSS에서 크기를 지정하는 방법으로 절대 크기와 상대 크기가 있습니다 각각의 장단점을 알고 활용할 수 있어야 합니다 절대 크기와 상대크기 비교 절대 크기 상대크기 정의 지정된 크기 주변 요소에 상대적인 크기 차이점 사이즈가 바뀌지 않는 요소 일 때 유용함 접근성의 문제가 있음 주변 요소에 따라 크기가 달라져 비율을 일정하게 유지 가능 사용자가 직접 읽기 적합한 환경을 설정 가능 절대크기 주변 요소에 영향을 받지 않는 지정된 크기 ● px 기본적인 단위 브라우저 기본 글꼴 크기 : 16px TIP! px값은 지정된 크기에서 변하지 않아 코딩 시 틀을 잡을 때 유용합니다. 브라우저 확대/축소로 인한 크기 조절은 가능합니다 상대크기 주변 요소에 따라 지정되는 크기 사용자가 브라우저 메뉴에서 크기를 변경할 수 .. 더보기 [HTML/CSS] 하이퍼링크 생성하기 웹 사용이 더욱 편리해지는 '링크' 하이퍼링크 생성하기 클릭으로 연결된 곳에 즉시 이동하여 웹 사용을 더욱 편리하게 해준는 기능 링크 태그 a 태그 - 링크 생성 해당 페이지에서 다른 페이지로 이동 시 사용 텍스트 or - 앵커 생성 a태그와 id 속성을 이용하여 한 페이지 내에서 링크 만들 수 있음, 내부 링크를 통해 그 곳으로 이동 내용 - 다운로드 링크 생성 다운로드할 수 있는 링크를 생성. #을 사용하면 해당 파일의 페이지(#page=페이지 번호)나 북마크(#bookmark)를 이용해 열 수 있음 텍스트 TIP! 서버에 올렸을 때 브라우저에 따라 오류가 있는 경우가 있습니다. 해서 복잡한 것 말고 간단한 다운로드의 경우 이용합니다. 오류 - 다운로드 받은 파일이 깨져있을 수 있습니다 - 브라우저에.. 더보기 [CSS] 폰트 스타일 알아보기 (Fonts) 웹 사이트에 적합한 글꼴를 사용하는 것은 브랜드의 아이덴티티를 구축하고, 가독성을 높여 사용자가 이용하기 보다 편리해집니다 폰트 FONTS ● Web Safe Font 브라우저나 기기에 기본적으로 설치되어있는 폰트 글꼴이 설치되어 있지 않거나 정상적으로 설치되지 않은 경우도 있기때문에 100% 안전한 웹 세이프 폰트는 없습니다 그렇기에 백업 폰트에 폴백 폰트를 작성해야합니다. html,css에서 가장 사용하기 좋은 웹 세이프 폰트 목록 Arial, Verdana Helvetica Tahome Trebuchet MS Times New Roman Georgia Garamond Courier New Brush Script MT ● Fallback Font 범용 글꼴 범용 글꼴 패밀리 목록 Serif : 가장 .. 더보기 [CSS] 구글 웹 폰트 사용하기 (Google Fonts) [무료 웹 폰트] 구글웹폰트 사용하는 방법을 알아보자! 웹 사이트 제작 시 웹 사이트에 적합한 글꼴을 사용하는 점이 중요합니다. 하지만 어떤 폰트를 사용하면 좋을 지 고민이지 않으신가요? 그렇다고 아무 곳에서 다운 받아서 쓰기에는 용량도 걱정되고, 저작권에 걸리지 않을까 걱정되기도 합니다. 유료로 구매하여 사용할 수 있지만 이번에는 무료 폰트 사이트 중 구글웹폰트에 대해 알아보겠습니다. 구글웹폰트 (Google Fonts) 웹에서 폰트를 불러와 웹 사이트에 적용할 수 있는 사이트 장점 무료 폰트 상업적 이용 가능 용량이 줄어듬 어느 플랫폼에서 사이트를 열어도 동일한 웹폰트 제공 구글웹폰트 사용하기 구글웹폰트 사이트 : https://fonts.google.com/ 1. 폰트 선택하기 구글웹폰트 사이트에서.. 더보기 이전 1 2 다음
