728x90

2025/05 6

[웹 국비 교육 6일차] border-radius, inherit, 노말라이즈, 메뉴 구현 정리 (2025. 5. 30.)

안녕하세요! 2025년 5월 30일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 6일차 내용을 정리해보았습니다. 오늘은 border-radius, inherit, 노말라이즈(normalize)등의 개념과 메뉴 구현을 하는 방법에 대해 배웠습니다. --- 6일차 학습내용 15강 ## border-radius: 요소의 모서리를 둥글게 만드는 CSS 속성이다.: 네모난 박스의 모서리를 부드럽게 둥글게 표현할 수 있다. : border-radius의 값은 퍼센트(%)와 픽셀(px) 모두 사용 할 수 있다. --- - 각 모서리를 다르게 할 수 있다.: 순서는 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래이다. --- - 둥근 사각형 5개 구현해보기 풀이: nav는 페이지 일부일 뿐, 전체가 아니다!: n..

[웹 국비 교육 5일차] nth-child, block 요소 정렬, HTML 태그, class, id (2025. 5. 29.)

안녕하세요! 2025년 5월 29일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 5일차 내용을 정리해보았습니다. 오늘은 요소 순서를 지정하는 `nth-child`, block 요소 정렬, 클래스와 id 선택자 등의 개념에 대해 배웠습니다. --- 5일차 학습내용 10강 ## nth-child: nth-child(n)는 부모의 자식 중에서 몇 번째 요소인지를 선택할 때 사용한다.section > div:nth-child(1) { background-color: red;}: section > div:nth-child(1)은 "section의 첫 번째 자식이면서 div일 때"만 해당된다.section > nav: nth-child(1) { background-color: red;: 위와 같이 쓸수..

[웹 국비 교육 4일차] img, margin & padding, inline-block 정리(2025. 5. 28.)

안녕하세요!2025년 5월 28일, UI·UX 반응형 웹퍼블리셔 국비 수업 4일차 수업 내용을 정리했습니다. 오늘은 `img `(이미지를 넣는 법), `margin`, `padding`( 여백 설정), inline(인라인)과 block(블록) 요소의 차이 등을 배웠습니다. --- 4일차 학습 내용 요약 8강 ## img(이미지 태그)와 구조: 이미지는 '이미지 주소 복사'로 가져와야 한다. (* 이미지 주소 (ex. https://picsum.photos 사용): alt=" "는 필수 속성이다. --- ## 이미지 비율 맞추기img { width: 300px;}- 이미지는 기본적으로 inline-block 요소이다.- 너비(width)나 높이(height) 한 가지만 지정하면, 나머지는 자동으로 비율..

[웹 국비 교육 3일차] text-align, hover, short code, nbsp, text-decoration 개념 정리 (2025. 5. 27.)

안녕하세요!2025년 5월 27일, UI·UX 반응형 웹퍼블리셔 국비 수업 3일차 수업 내용을 정리했습니다. 오늘은 `text-align`, `hover`, `short code `, `nbsp`, `text-decoration` 사용법까지 배웠습니다. 3일차 학습 내용 요약 5강## text-align: 정렬은 부모에게! 개념 - 폰트를 정렬하려면 text-align을 자식이 아닌 부모 요소에 적용해야 한다. - 부모 요소의 너비가 확보되어야 정렬이 제대로 적용된다.- 부모에게 `text-align: center;`를 주면, 그 안의 자식 폰트가 가운데 정렬된다.div { text-align: center;} --- 5강 문제 문제 풀이 비교 bnx 사이트 네이버 구글/*LEE 푼 방법..

[웹 국비 교육 2일차] HTML, CSS : display, 엘리먼트 관계, 글자와 링크, 후손 선택자 개념 정리 (2025. 5. 26.)

안녕하세요! 2025년 5월 26일, UI·UX 반응형 웹퍼블리셔 국비 수업 2일차 수업 내용을 정리해보았습니다. 오늘은 CSS의 핵심 속성인 `display` 개념, HTML 구조, 그리고 주석 사용법 등을 배웠습니다. --- 2일차 학습 내용 요약 Display 속성 ## display: block- 기본값인 경우, 바뀌는 것이 없음.(블록화)- 특징: - 너비: 설정하지 않으면 최대한 늘어남 - 높이: 내용에 따라 최소한으로 줄어듦 - 한 줄에 무조건 하나만 위 (자리가 남아도 옆에 못 옴) ## display: inline-block- 글자처럼 배치되는 속성(글자화)- 특징: - 너비와 높이: 설정하지 않으면 최소한으로 줄어듦 - 한 줄에 여러 개가 나열됨 (공간이 허용되는 한) ..

[웹 국비 교육 1일차] HTML, CSS 기초 개념 정리 (2025. 5. 23.)

안녕하세요! 2025년 5월 23일부터 UI·UX 반응형 웹퍼블리셔 국비 지원 수업을 시작했습니다. 앞으로 이 블로그에 매일의 학습 내용과 복습 기록을 정리해 올릴 예정입니다. --- 1일차 학습 내용: HTML과 CSS 기초 개념 ## HTML: 웹 페이지의 뼈대, "배우" - HTML(HyperText Markup Language)는 웹페이지의 구조를 구성하는 언어입니다. - 엘리먼트(Element)란? - 여는 태그(``)와 닫는 태그(``)로 구성된 HTML의 기본 단위입니다. - HTML은 엘리먼트들을 조합해 페이지를 마크업합니다. ## CSS: HTML을 꾸며주는 "스타일리스트" - CSS(Cascading Style Sheets)는 웹 요소의 디자인과 스타일을 설정합니다. - CS..

728x90