후니's Blog

Web Basic/CSS

레이아웃 만들기

2021.07.31

배치 방법 결정하는 속성 display 속성 display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수 있음 자주 사용하는 display 속성값 block : 인라인 레벨 요소를 블록 레벨 요소로 만듦 inline : 블록 레벨 요소를 인라인 레벨 요소로 만듦 inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있음 none : 해당 요소를 화면에 표시하지 않음 -(예시) : 예시 1 예시 2 예시 3 예시 4 -(결과) : 왼쪽이나 오른쪽으로 배치하는 속성 float 속성 태그는 블록 레벨 요소..

Web Basic/CSS

박스모델 여백 조절하기

2021.07.30

요소 주변의 여백을 설정하는 속성 margin 속성 요소와 요소 사이의 간격을 조절 할 수 있음 4개 방향에 똑같이 지정할 수 있고, margin 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어를 사용해서 특정 방향에만 지정할 수도 있음 기본형 : margin: | | auto margin 속성값 : 너비값이나 높이값을 px이나 em 같은 단위와 함께 수치로 지정함 : 박스 모델을 포함한 부모 요소를 기준으로 너비값이나 높이값을 퍼센트(%)로 지정함 auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함 마진 속성을 사용하여 웹 문서를 가운데 정렬하기 margin 속성을 사용하여 웹 문서의 내용을 화면 중앙에 배치하려면 배치할 요소의 너비값이 정해져 있어야 함 margin-l..

Web Basic/CSS

박스 모델 테두리 지정하기

2021.07.30

박스 모델의 방향 top : 윗 부분 right : 오른쪽 bottom : 아랫 부분 left : 왼쪽 테두리 스타일을 지정하는 속성 border-style 속성 기본값은 none border-style 속성값 none : 테두리가 없음 / 기본값 hidden : 테두리를 감춤 / 표에서 border-collapse: collapse일 경우 다른 테두리도 표시되지 않음 solid : 테두리를 실선으로 표시함 dotted : 테두리를 점선으로 표시함 dashed : 테두리를 짧은 직선으로 표시함 double : 테두리를 이중선으로 표시함 / 두 선 사이의 간격이 border-width 값이 됨 groove : 테두리를 창에 조각한 것처럼 표시함 / 홈이 파인 듯 입체 느낌 inset : 표에서 border..

Web Basic/CSS

CSS 박스 모델

2021.07.15

박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라짐 블록 레벨 요소 블록 레벨 요소 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 한 줄을 차지한다 = 해당 요소의 너비가 100% ∴ 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없음 대표적인 태그로 , , 등이 있음 -(예시) : 예제 예시 1 예시 2 예시 3 예시 4 예시 5 -(결과) : 인라인 레벨 요소 인라인 레벨 요소 한 줄을 차지하지 않음 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 ∴ 한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있음 대표적인 태그로 , , 등이 있음 -(예시) : 예제 예시 1 예시 2 예시 3 예시 4 예시 5 -(결과) : 박스 모델 박..

Web Basic/CSS

표 스타일

2021.07.15

표 제목의 위치를 정해 주는 속성 caption-side 속성 캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 사용하면 표 아래쪽으로 옮길 수 있음 기본형 : caption-side: top | bottom ┌ top : 캡션을 표 윗부분에 표시함 / 기본값 └ bottom : 캡션을 표 아랫부분에 표시함 표에 테두리를 그려 주는 속성 border 속성 표 바깥 테두리와 셀 테두리를 각각 지정함 -(예시) : 예제 예제 예시 1 예시 2 예시 3 예시 4 A B C D 가 나 다 라 -(결과) : 셀 사이의 여백을 지정하는 속성 border-spacing 속성 셀과 셀 사이의 여백을 조절할 수 있음 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1..

Web Basic/CSS

목록 스타일

2021.07.15

불릿 모양과 번호 스타일을 지정하는 속성 list-style-type 속성 순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있음 순서 있는 목록에서는 번호 스타일을 지정할 수 있음 list-style-type의 속성값 : ┌ disc : 채운 원 모양 ( ● ) ├ circle : 빈 원 모양 ( ○ ) ├ square : 채운 사각형 모양 ( ■ ) ├ decimal : 1부터 시작하는 10진수 ( 1, 2, 3, ... ) ├ decimal-leading-zero : 앞에 0이 붙는 10진수 ( 01, 02, 03, ... ) ├ lower-roman : 로마 숫자 소문자 ( ⅰ, ⅱ, ⅲ, ... ) ├ upper-roman : 로마 숫자 대문자 ( Ⅰ, Ⅱ, Ⅲ, ... ) ├ lo..

Web Basic/CSS

텍스트 관련 스타일

2021.07.14

글자색을 지정하는 속성 color 속성 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때 사용 사용할 수 있는 속성값은 16진수, rgb(rgba), hsl(hsla), 색상 이름 기본형 : color: 색상을 표현하는 방법 : 16진수로 표현하는 방법 ┌ #333333처럼 # 기호 다음에 6자리의 16진수로 표현함 ├ 앞에서부터 두 자리씩 묶어 #RRGGBB로 표시함 ├ 00 : 해당 색상이 하나도 섞이지 않음 / ff : 해당 색상이 가득 섞임 ├ #000000 : 검은색 / #ffffff : 흰색 └ 만약 색상값이 #0000ff 처럼 두 자리씩 중복될 경우 #00f 로 줄여서 표기 가능 rgb로 표현하는 방법 ┌ 0 : 하나도 섞이지 않음 / 255 : 가득 섞임 └ 0 ~ 255 사이의 값으로 색상..

Web Basic/CSS

웹 폰트

2021.07.14

웹 폰트 사용자 시스템에 없는 글꼴도 사용 가능하게 함 사용자 시스템에 없는 글꼴이더라도 웹 문서를 만들 때 사용한 글꼴을 내려받은 후 표시함 기존에 가지고 있던 웹 폰트를 사용했다면 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드 해야 함 웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 다운됨 컴퓨터에서 사용하는 글꼴은 트루타입으로 파일 확장자는 *.ttf 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기에 적절하지 않음 웹에 적절한 글꼴에는 EOT(embedded open type), WOFF(web open font format), WOFF2 가 있음 기본형 : @font-face { font-family: ; src: [, , ...]; } ..

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

전체 글

레이아웃 만들기

박스모델 여백 조절하기

박스 모델 테두리 지정하기

CSS 박스 모델

표 스타일

목록 스타일

텍스트 관련 스타일

웹 폰트

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역