본문 바로가기

웹/HTML&CSS

 (12)
[HTML/CSS] 리스트, 리스트 스타일링 / 2021.09.09 * 참고 자료 : 코드잇 HTML/CSS 강의 1. Ordered List 순서가 있는 리스트 순서가 있는 리스트는 태그를 사용한다. ol은 Ordered List의 약자이다. 예를 들어, 오늘 할 일을 적은 리스트를 만들어보자. 구조 내용 내용 내용 * 여기서 li는 List Item의 약자이다. 웹페이지를 열어보면, 이와 같이 순서가 매겨지게 된다. 이 순서를 다른 형식으로 바꿀 수는 없을까? (1) 소문자 알파벳 순서대로 내용 내용 내용 * ol태그에 type="a"라고 적어주면 된다. (2) 대문자 알파벳 순서대로 내용 내용 내용 * ol태그에 type="A"라고 적어주면 된다. (3) 소문자 로마 숫자대로 내용 내용 내용 * ol태그에 type="i"라고 적어주면 된다. (4) 대문자 로마 숫자..
[HTML/CSS] Position 포지션 / 2021.08.31 * 참고 자료 : 코드잇 HTML/CSS 강의 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 Position .p1{ border: 1px solid red; margin: 30px; padding: 30px; } .p2{ border: 1px solid blue; ma..
[HTML/CSS] display 디스플레이/ 2021.08.28 * 참고 자료 : 코드잇 HTML/CSS 강의 아래의 코드로 display속성을 공부해 보자. Life is too short, You need Python 레이아웃을 제대로 하기위해서는 일단 display속성을 이해해야 한다. display 속성은 inline, block, inline-block 등등 여러 가지 종류가 있다. 모든 html요소들은 display속성 중 한가지를 가지고 있다. 대부분의 요소는 inline 혹은 block이다. 1. inline display ex) , , , , inline-display는 다른 요소들과 같은 줄에 머무르려고 하는 성향이 있으며 가로길이는 필요한 만큼만 차지한다. (길이를 따로 설정해 주어도 auto로 나온다. 만약 길이를 변경하고 싶다면 display:..
[HTML/CSS] box-sizing / 2021.08.28 * 참고 자료 : 코드잇 HTML/CSS 강의 Ice cream Ice cream, chillin', chillin' Ice cream, chillin' Ice cream, chillin', chillin' Ice cream, chillin' I know that my heart can be so cold But I'm sweet for you, come put me in a cone You're the only touch, yeah, that get me meltin' He's my favorite flavor, always gonna pick him You're the cherry piece, just stay on top of me, so I can't see nobody else for me, n..
[HTML/CSS] Border 테두리/ 2021.08.26 * 참고 자료 : 코드잇 HTML/CSS 강의 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 border .p1 { } Ice cream, chillin', chillin' Ice cream, chillin' Ice cream, chillin', chillin' Ice cream, chillin' I know that my heart can be so cold But I'm sweet for you, come put me in a cone You're the only touch, yeah, that get me meltin' He's my fa..
[HTML/CSS] Width, Height, Overflow / 2021.08.26 * 참고 자료 : 코드잇 HTML/CSS 강의 이 페이지를 예시로 width와 height, overflow를 공부해보자. 1. Width 먼저 첫번째 문단에 width: 500px을 설정해보면, 이렇게 가로가 500px로 설정된 것을 확인할 수 있다. (1) min-width min-width는 요소의 최소 가로길이를 뜻한다. min-width: 500px이라고 설정하면 요소의 길이가 최소 500px이라는 뜻이다. 웹페이지의 가로를 계속 늘리면 가로의 길이가 계속 늘어나지만 가로를 계속 줄여보면 가로가 최소 500px를 유지해 문단이 잘리는 것을 볼 수 있다. (2) max-width max-width는 요소의 최대 가로길이를 뜻한다. max-width: 500px이라고 설정하면 요소의 길이가 최대 5..
[HTML/CSS] Padding, Margin 패딩, 마진/ 2021.08.25 * 참고 자료 : 코드잇 HTML/CSS 강의 1. margin & padding 요소는 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다. padding은 내용과 테두리 사이의 공간이며, margin은 요소 주위의 여백이다. 즉 padding은 안, margin은 밖을 말한다. 그림으로 나타내면 이런식이다. 먼저, 다음 코드로 만들어진 사이트가 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 ..
[HTML/CSS] 텍스트 스타일링 / 2021.08.14 * 참고 자료 : 코드잇 HTML/CSS 강의 * 텍스트 색 CSS에서 색을 표현하는 방식에는 세 가지가 있다. 1. 색 이름 h1태그를 orange색으로 바꿔보자 코드를 다음과 같이 적고 새로고침 해보면, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Color Example h1 { color: orange; } 색깔을 바꿔봅시다! cs h1태그의 내용인 "색깔을 바꿔봅시다!"가 orange색으로 바뀐 것을 확인할 수 있다. 2. RGB 값 모든 색은 RED, GREEN, BLUE의 조화로 표현할 수 있다. 이 표현 방식을 RGB라고 한다. rgb값을 가져오기 위해 "HTML Color Codes"라는 사이트를 참고하겠습니다. https://htmlcolorcodes..

티스토리툴바