CSS 레이아웃 만들기 2

자 이번 시간은 저번 시간에 이어서 레이아웃 위에 레이아웃을 추가해 볼 것이다. 일단 저번 시간에 했던 것을 가져오도록 하자 header aside content footer  자 여기서 우리는 content 안에 4 개의 상자를 추가해볼 것이다.  header aside [공지사항] [최근게시물] [최근댓글] [유용한사이트] footer  자 각 아이템들에게 창을 만들어주자 header aside ..

2025.01.17

CSS 레이아웃 만들기 1

header aside [공지사항] [최근게시물] [최근댓글] [유용한사이트] footer 우리가 보는 모든 웹 페이지는 레이아웃이란게 존재한다 레이아웃은 배치라고 보면 되겠다 무수히 많은 레이아웃들이 존재하지만 우리는 가장 기본적인header, container, footer 부터 만들어 볼 것이다.  header content footer 위와 같이 코드를 작성해주고 실행해보면이렇게 나온다. 이것이 가장 기본적인 레이아웃이다.여기에 색깔만 좀 입혀주고 부담스러운 가로 길이만 조정해주면 훨씬 보기..

2025.01.15

CSS 수평메뉴 수직메뉴 간단하게 만들어 보기

오늘은 수평메뉴와 수직 메뉴를 간단하게 구현해보겠다애플 공식 홈페이지의 수평 메뉴의 일부를 만들어보려고 한다. 일단 메뉴 안에 여러 카테고리 들이 있는 걸로 생각해서 list를 쓰면 편할 것 같다그럼 리스트를 해서 작성 해보자 스토어 Mac iPad iPhone Watch Vision AirPods 리스트를 썼더니 수평이 아닌 수직 메뉴가 생성 됐다. 하지만 괜찮다 CSS는 이를 수평으로 바꿔줄 뿐더러 좀 더 멋드러지게 바꿔줄 수 있다.  스토어 ..

2025.01.07

CSS 선택자(Selector)의 요소 정리

CSS에서 선택자(Selector)란 어떤 요소에 스타일을 적용할 것인가에 대한 정보이다. 선택자{ 속성명: 속성값;}선택자는 위와 같은 기본 문법 형태를 가진다. 선택자의 종류는 다음과 같이 5개가 있다.- 기본 선택자(Element Selector) : tag명- 그룹 선택자 : h1,p,div ... { color:red; } - 특성 선택자(Attribute Selector) : 속성이용한 Selector- 결합 선택자(부모 > 자식 , 나~형제, 나 + 형제,..) - 의사 클래스 : a:hover { color:red; }  기본 선택자에는 5개의 선택자가 포함된다기본 선택자 1) Universal Selector* : asterisk는 전체를 의미한다.* {        color : red..

2025.01.02

CSS(Cascading Style Sheets)란?

이번 시간에는 CSS에 대해 소개하려고 한다. CSS(Cascading Style Sheets)란 무엇인가?- 계단식으로 스타일을 정의하는 문서- CSS는 HTML문서에 스타일을 더해준다.- HTML 문서는 태그가 태그를 포함하는 계단식 구조를 갖고 있다.- HTML과 CSS를 더해서 웹브라우저로 실행하게되면 웹브라우저는 문서에 적혀있는대로  화면을 구성하고 사용자에게 보여준다 이 과정을 렌더링이라고 한다. 단, CSS 문서 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정리하는데 있으므로  HTML문서가 없는 CSS문서는 사실상 의미가 없다.- HTML : 웹문서의 콘텐츠를 구성하는 언어 -CSS : 웹문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치등.....

2024.12.23