Frontend/html, css

Wep developer 부트캠프 (2022-05-14)

CSS 정리 display : flex; (flex-direction : row;) 기본 방향이 가로로 설정 되어 있어 실행할 경우 각 요소들이 행방향으로 정렬됨 overflow : hidden; 넘치는 부분을 잘라서 보여지지 않게 만듦 object-fit : cover; 이미지를 사용 가능한 공간에 맞춰줌 flex-direction : column; 컨테이너 블록 개체 내에 있는 요소들을 열 방향으로 정렬 grid-template-columns : 1fr 1fr; 전체 너비를 기준으로 반으로 나눠 2열로 정렬됨 gap : (세로) (가로); 설정한 값만큼 서로 다른 요소가 멀어지게 됨 li:first-of-type { // 부모요소 ul 안에 있는 li 중에 첫번째 요소를 선택 } li:nth-of-t..

Web Developer 부트캠프 (05/02)

index.html 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 HTML & CSS Basics Summary HTML & CSS Basics Summary HTML Summary HTML (HyperText Markup Language) is used to define our page contentm structure and meaning. you don't use it for st..

Web Developer 부트캠프 (05/01)

index.html 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 My Daily Challenge Max' Challenge for Wednesday, August 4th Learn about the basics of web development - specifically dive into HTML & CSS. Explore the full week Colored by Color Scripter cs daily-challenge.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 ..

Web Developer 부트캠프 (04/30)

이번 시간에는 클래스의 개념과 상속이란 것을 알게 되었습니다. 또한 padding, border, margin등의 정확한 개념과 실습을 통해 웹사이트에 직접 적용할 수 있었습니다. CSS의 속성값 적용이 중복될경우 클래스와 같이 좀 더 세밀하게 지정하는 것이 우선순위로 적용됩니다. HTML 파일 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 My Upcoming Challenges My Upcoming Challenges These are my goals for the next days View Today's Challenge Tuesda..

Web Developer 부트캠프 (04/28)

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 My Daily Challenge Max' Challenge for Wednesday, August 4th Learn about the basics of web development - specifically dive into HTML & CSS. Explore the full week My Upcoming Challenges My Upcoming Challenges View Today's Challenge Rep..

Web Developer 부트캠프 (04/26)

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 h1 { font-family: sans-serif; text-align: center; color: blue; } p { font-family: sans-serif; text-align: center; color: gray; } My Daily Challenge Max' Challenge for Wednesday, August 4th Learn about the basics of web development - specifically dive into HTML & CSS. I'll achieve this goal by diving into more learni..

2022 Web Development : CSS 기초

CSS : 콘텐츠 및 페이지의 스타일과 모양을 설정하는데 사용 CSS 사용방법 : HTML 요소에 대한 '속성' 및 해당 값 설정 글로벌 "CSS 스타일"의 장점 : 하나의 CSS 규칙이 페이지의 여러 요소에 적용될 수 있음 부분에는 과 같이 겉으로는 표현되지 않지만 글의 속성을 변경해주는 추가 메타데이터 등을 입력 부분에는 실제로 사용자 화면에서 보여지는 내용을 입력 인라인 스타일 : 스타일 속성을 통해 요소 스타일을 할당 CSS 선택자 : 규칙이 적용되는 요소를 정의하는 CSS 규칙의 일부

2022 Web Development : HTML 기초

HTML : 콘텐츠와 페이지 구조를 정의하고 설명하는데 사용 웹페이지 : 서버에서 제공하는 *.html 파일 브라우저가 웹페이지를 불러오는 방법 : HTML 콘텐츠를 원격 서버의 파일에 저장 -> 사용자가 페이지 방문시 서버에서 브라우저로 보냄 HTML 요소 : 주석이 달린 콘텐츠 : HTML 태그 (요소 이름 포함) + 콘텐츠 HTML 요소가 필요한 이유 : 콘텐츠에 주석을 달고 더 많은 의미를 제공 모든 HTML 요소는 표준화되어 있다. HTML 속성 : 요소에 추가 구성을 추가 가능