본문 바로가기

Programming/HTML5 & CSS3

 (37)
[CSS] Grid 사용하는 법 Grid란? Grid는 웹페이지의 구역을 나눌 때 사용하는 최신 기술입니다. div vs span div와 span은 어떠한 의미도 갖고 있지 않은 태그로 개발자는 이 태그들을 사용해 관련 있는 정보를 하나로 묶어 구역을 형성할 수 있습니다. 블록 레벨로 묶고 싶을 경우는 div를 인라인 레벨로 묶고 싶을 경우는 span을 사용하시면 됩니다. div와 span은 grid를 사용할 때 자주 사용하는 태그이니 꼭 기억해주시길 바랍니다. Grid 사용하기 Grid를 사용하기 위해서는 두가지 행위를 해야합니다. 먼저, 태그들을 감싸는 태그를 추가하고 이 태그의 display 속성의 값을 grid로 설정해야합니다. 그리고 grid-template-columns와 grid-template-rows 속성을 추가해야합..
[CSS] 미디어쿼리 사용하는 법 화면의 크기에 따라 웹페이지의 요소가 바뀌는 반응형 웹 디자인을 만드는 방법은 의외로 간단합니다. 미디어쿼리를 사용한다면 누구나 쉽게 반응형 웹을 만들 수 있습니다. 미디어 쿼리 사용하기 미디어 쿼리를 사용하기 위해서는 미디어 쿼리 예제 800px을 기준으로 화면의 크기가 800px 이상일 경우와 800px 미만일 경우의 디자인을 다르게 해보겠습니다. 아래의 코드는 화면의 크기가 800px 이상일 경우의 화면 디자인을 정의하는 코드입니다. 이 코드에 미디어 쿼리를 추가해 화면의 크기가 800px 미만일 경우의 디자인을 새로 정의해야합니다. MediaQuery Menu1 Menu2 Menu3 Menu4 Menu5 화면이 800px보다 작다는 것은 화면의 최대 크기가 800px이라는 뜻입니다. 이 경우 조건..
[CSS] 배치 형태 - position 웹 문서를 만들 때 각 요소들을 원하는 위치에 배치하고자 하는 경우 position 속성을 사용하면 됩니다. position 속성의 값은 static, absolute, relative, fixed 총 4가지가 있습니다. position 속성 값 설명 static 기본값. 위->아래, 좌->우 순으로 배치. relative 요소의 원래 static 위치를 기준으로 상대적으로 배치. absolute 가장 가까운 relative를 기준으로 상대적으로 배치. fixed 고정된 위치. (실습1) static static은 position의 값을 따로 지정하지 않았을 때 기본으로 지정되어 있는 기본값입니다. static은 위에서 아래로, 왼쪽에서 오른쪽으로 요소들을 배치합니다. A B C 아래의 사진은 위의 코드..
[CSS] 배치 형태 - display 블록 레벨 vs 인라인 레벨 블록 레벨은 각 요소들을 세로로 배열합니다. 블록 레벨의 요소들은 한 줄에 하나만 위치하며 다른 요소들은 자동으로 줄바꿈되어 세로로 나란히 배열됩니다. 반면, 인라인 레벨은 각 요소들을 가로로 배열합니다. 인라인 레벨의 요소들은 한 줄에 여러개가 위치하여 가로로 나란히 배열됩니다. 배치 형태 지정하기 - display 화면에 배치되는 모습을 지정하기 위해서는 display를 사용해야합니다. display 속성의 값들은 아래의 표를 참조해주세요. display 값 설명 block 요소들을 세로로 배열 (블록 레벨) inline 요소들을 가로로 배열 (인라인 레벨) inline-block 요소들을 가로로 배열 (블록 레벨이지만 인라인 레벨처럼 배열) none 요소들을 숨김 처리 ..
[CSS] 다단 만드는 법 1. 다단 나누기 : 너비 기준(column-width) / 개수 기준(column-count) 단을 나누는 방법에는 두 가지가 있습니다. 하나는 단의 너비를 기준으로 나누는 방법과 단의 개수를 기준으로 나누는 방법이 있습니다. 전자의 경우 column-width를 후자의 경우는 column-count를 사용합니다. 다단의 전체 너비를 500px이라고 가정해봅시다. column-width:100px;으로 단을 나누는 경우 한 단의 크기가 100px로 고정이 되기 때문에 5개의 단이 생성됩니다. column-count:4;의 경우 단의 개수를 4개로 지정하기 때문에 4개의 단을 생성합니다. column-width를 사용하는 경우 브라우저 창의 너비가 달라지면 단의 개수가 변합니다. 반면, column-co..
[CSS] 글자 스타일 1. 글자 크기 변경하기 : font-size 글자의 크기를 변경할 때는 font-size 속성을 사용합니다. font-size에 지정할 수 있는 값의 단위는 픽셀(px), 포인트(pt)입니다. 또, font-size에는 large, medium, small을 값으로 지정할 수 있습니다. 원하시는 값을 골라 사용하시면 됩니다. 1. 글자 크기 변경하기 10px 20px 10pt 20pt medium large 2. 글자 기울게 효과 적용하기 : font-style 글자에 기울게 효과를 적용하기 위해서는 font-style의 값을 italic으로 지정하면 됩니다. 2. 글자 기울게 효과 적용하기 기울게 효과 X 기울게 효과 O 3. 글자 굵기 변경하기 : font-weight 글자의 굵기를 변경하기 위해서..
[CSS] 속성 선택자, 가상 클래스 선택자 속성 선택자 특정 스타일이 적용되는 위치가 속성인 선택자 속성 선택자의 종류 형식 설명 1 [속성] {속성 : 속성 값: ...} [ ]의 속성을 찾아 스타일 적용 ex a [href] {/*css코드*/} href 속성이 있을 경우 스타일 지정 2 [속성=값] { 속성 : 속성 값; ... } 속성과 지정한 값이 일치하는 경우 스타일 적용 ex input [ type = "email" ] {/*css코드*/} input 태그의 type이 email 이라면 스타일 적용 3 [속성~=값] { 속성 : 속성 값; ... } 속성과 지정한 값이 일치하는 경우 스타일 적용 (단, 비교 대상이 다수라면 하나의 조건만 만족시켜도 스타일을 적용) ex h2 [example="test" ] {/*css코드*/} h2 ..
[CSS] 선택자의 기본 선택자의 개념 특정 스타일이 적용되는 위치 선택자의 사용방법 선택자는 선택자 { } 형태로 사용합니다. 괄호 앞에 선택자를 작성하시고 괄호 안에 css 코드를 자유롭게 작성하시면 됩니다. 아래 코드에서는 *과 h1이 선택자입니다. * { /* css 코드 */ } h1{ /* css 코드 */ } 선택자의 종류 1. 전체 선택자 - * 전체 선택자는 css 파일이 적용된 html 파일의 모든 부분에 스타일을 적용할 때 사용합니다. 전체 선택자는 * 기호로 표시하므로 '* { }' 형태로 사용하면 됩니다. *{ /*css 코드 */ } 2. 태그 선택자 태그 선택자는 html 파일의 특정 태그에 스타일을 적용할 때 사용합니다. 태그 선택자를 사용하면 해당 태그를 사용하는 모든 영역에 일괄적으로 스타일이 적..

티스토리툴바