영국 척척석사 유학생 일기장👩🏻‍🎓

1. 블록디스플레이에는 블록과 인라인이 있습니다. 그 중 블록(block)은 , , 같은 것들 입니다. 블록은 위에서부터 아래로 배치됩니다. 너비와 높이를 지정할 수 있다는 특징이 있습니다. 2. 인라인인라인(inline)은 , , , 같은 것들 입니다. 평소에 글 쓰는 방향과 일치하며 화면에 꽉 차면 다음 줄로 넘어갑니다. 블록과 달리 너비와 높이를 지정할 수 없습니다. (태그는 예외) 그리고 여백은 가로로(글 쓰는 방향)만 가능합니다.3. 인라인 블록인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성입니다.4. float요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있습니다.5. 블록, 인라인 블록, 인라인 비교

1. 박스 모델(Box model) HTML/CSS에서 요소는 기본적으로 박스 형태입니다. 밖에서부터 차례대로 바깥 여백인 마진, 태두리인 보더, 테두리와 실제 내용 사이의 여백인 패딩, 그리고 실제 내용이 들어가는 콘텐트 박스가 있습니다. 2. border 속성 주로 굵기, 테두리 종류, 색상 순서로 씁니다. 예를 들어서 아래 코드는 2px 굵기의 실선으로 옅은 회색(#ededed)를 사용한 겁니다. border: 2px solid #ededed; 3. border-radius 속성 박스 모델의 모서리를 둥글게 만들 때 사용합니다. border 속성 없이도 쓸 수 있습니다. 아래 코드는 16px 만큼 둥글게 하는 코드입니다. border-radius: 16px; 참고로 50% 만큼 둥글게 하면 타원 형..

1. Padding 영역 안쪽에 여백을 넣을 때 사용합니다. 숫자의 순서는 시계 방향으로 0시 -> 3시 -> 6시 -> 9시 순서입니다. 패딩 값을 각각 주고 싶을 때 쓰는 속성들입니다. 상,우,하,좌 값을 따로 썼던 걸 속성으로 나눈 거라고 생각하면 됩니다. 아래의 두 코드는 똑같은 코드입니다. padding: 16px 8px 24px 10px; padding-top: 16px; padding-right: 8px; padding-bottom: 24px; padding-left: 10px; 2. Margin 영역 바깥쪽 여백을 넣을 때 사용합니다. 특히 좌우, 바깥 여백의 경우에는 auto 라는 것을 사용해서 자동으로 채울 수 있었습니다. 여기서 주의할 점은 요소의 width 속성이 정해져 있어야 자동..

카드에 그림자를 넣고 카드 요소 일부분에 반투명하게 만드는 방법에 대해 알아보겠습니다. 1. 그림자 box-shadow 가로, 세로 위치, 흐린 정도(Blur), 퍼지는 정도(Spread), 색상의 순서로 씁니다. box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6); /* 가로: 5px 세로: 10px 흐린 정도(Blur): 15px 퍼지는 정도(Spread): 8px 색상: rgba(0, 0, 0, 0.6) */ 참고로, 구글에서 box shadow generator라고 검색하면 여러 그림자를 만드는 속성을 볼 수 있습니다. 2. 불투명도 opacity 요소 전체의 불투명도를 조절할 때 사용합니다. 0에서 1 사이의 소수 값으로 단위 없이 쓰면 됩니다. opacity..

오늘은 배경이미지를 넣는 CSS 속성에 대해 알아보겠습니다. 1. 배경이미지 넣기 backgroun-image 1) 배경이미지 배경이미지를 넣는 CSS코드는 background-image 입니다. url(...)이라는 문법으로 배경이미지를 넣습니다. backgound-image: url('flowers.png') 배경이미지는 여러 개 넣을 수 있습니다. 아래처럼 이미지를 배경으로 넣으면 a.png 아래에 b.png 가 깔리고, 맨 밑에는 c.png 가 깔립니다. background-image: url('a.png'), /* 제일 위에 보이는 이미지 */ url('b.png'), url('c.png'); 2) 배경의 위치 background-position 기본값은 left top(왼쪽 위)이고, 가운데 ..

앞에서 학습한 텍스트 관련 CSS 속성이외의 텍스트 스타일링에 대해 알아보겠습니다. 1. 줄 높이 line-height 줄과 줄 사이의 간격을 조절할 때 CSS 에서는 줄의 높이로 조절합니다. 줄 높이의 값인 line-height 는 단위 없이 쓰는 글자 크기에 상대적인 값입니다. 예를 들어서 font-size 가 16px 이라면 line-height: 1 은 16px*1=16px이 되고, line-height: 1.5는 16px*1.5=24px이 됩니다. 넓게 넓게 넓게 보통 보통 보통 좁게 좁게 좁게 .loose { font-size: 16px; line-height: 1.7; /* 16px * 1.7 = 27.2px */ } .regular { font-size: 16px; line-height: ..

CSS의 기본개념을 정리해보겠습니다. 1. CSS 규칙 선택자 { 속성: 속성값; 속성: 속성값; } 2. CSS 선택자 규칙에서 요소를 선택하는 데 사용하는 부분입니다. 1) 태그 이름 h1, div 같은 걸 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용합니다. 예를 들어서 모든 h3 태그의 글자 크기를 24px로 하려면 아래와 같이 씁니다. h3 { font-size: 24px; } 2) 아이디(id) 맨 앞에 샵을 붙여서 #아이디_이름 과 같은 문법으로 씁니다. 참고로 아이디는 한 페이지 안에서 중복으로 쓰면 안됩니다. 예를 들어서 아이디 이름이 hallasan 인 태그에 글자색을 넣으려면 아래와 같이 씁니다. 우도 한라산 국립공원 성산 일출봉 군산 오름 #hallasan { color: #..

이번 시간에는 글자색을 한번에 바꾸는 방법을 알아보겠습니다. 1. 글자색 한번에 바꾸기 h3 태그가 여러개이고 각각의 글자색이 다 같다면 한번에 글자색을 바꿀 수 있습니다. 규칙을 정해주면 되는데 위와 같이 head 태그 안에 일명 관심사의 분리를 시켜주는 것입니다. 이런 식으로 관심사의 분리를 시켜주면 한번에 색상을 변경하기도 편하고 HTML 과 CSS 를 따로 저장하기 편합니다. 만약, h3중 하나만 색상을 변경해야 한다면 어떻게 할까요? id를 넣어주면 됩니다. 예를 들어, 한라산 국립공원만 다른 색을 넣는다고 가정해봅시다. 우도 한라산 국립공원 성산 일출봉 군산 오름 위와 같이 id를 주고 style태그에 #hallasan 에 색상을 넣어주면 한라산 국립공원만 색상이 바뀌는 것을 볼 수 있습니다...

저번 시간에는 글 정렬하는 방법을 알아보았습니다. 이번 시간에는 이미지와 본문의 크기, 여백을조절하는 방법을 알아보겠습니다. 1. 이미지와 본문 크기 조절하기 이미지의 너비를 조절하는 CSS 속성은 width, 높이를 조절하는 속성은 height 입니다. 따라서 이미지의 크기를 너비 700px, 높이 375px 조절하는 코드는 입니다. 하지만 이미지의 크기를 정해버리면 화면의 크기에 따라 이미지가 꽉 차지 않을 수 있습니다. 따라서 화면의 크기에 따라 이미지가 꽉 차게 하려면 너비에 700px 대신 100%, 높이 값을 지워주면 비율을 유지하면서 이미지가 화면에 따라 커지고 작아지는 것을 볼 수 있습니다. 본문 크기를 조절하는 방법도 영역 태그인 태그에 픽셀 값을 넣어주면 됩니다. 2. 여백 조절하기 글..

저번 시간에는 글꼴 변경하는 방법을 알아보았습니다. 이번 시간에는 글 정렬하는 법을 알아보겠습니다. 1. 글 정렬하기 기본적으로 웹페이지는 좌측 정렬이 되어있습니다. 글을 정렬하는 CSS 속성은 text-align 입니다. 따라서 h1태그에 중앙정렬을 하는 방법은 이라고 입력하면 됩니다. 이런 식으로 태그마다 넣어도 되고 전체 영역에 넣어도 됩니다. 전체 영역에 중앙정렬을 하는 코드는 입니다. 전체 영역에 넣으면 덜 번거로울 것 같습니다. 오른쪽 정렬을 하는 것은 center 대신 right, 좌측 정렬을 left로 입력하면 됩니다. 태그에는 중앙 정렬을, 후기가 들어있는 태그에는 좌측정렬을 적용하면 다음과 같습니다. 1 2 3 7 8 9 Weekly Codeit 10 금요일에 만나는 코딩 한 스푼 11..