[웹페이지 #01] 3. 메인페이지 상단 공지 & 하단 푸터 (HTML, CSS)

1. 상단 공지 * HTML 코드 [ TMI 공지 ] 추석 전에는 7조였는데,, 쉬고 오니 2조가 되었습니다. 👉 안녕하세요 7ㅏ즈아 2조입니다. 😃 * CSS 코드 .notice-word { /*상단 공지*/ color: #f9f3cc; font-weight: 700; font-family: 'Noto Sans KR', sans-serif !important; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 30px; background-color: #6b85a0db; } 2. 하단 푸터 HTML & CSS * HTML 코드 리액트 ..

• format_list_bulleted CSS
• · 2023. 10. 7.
• textsms

[웹페이지 #01] 2. <div>태그 여러 개로 소개글 그리기 (HTML, CSS)

1. CSS 코드 /*첫번째 구간*/ .top-layout { display: flex; justify-content: center; /*가운데오게*/ } .top { width: 900px; display: flex; justify-content: center; /*가운데오게*/ padding-bottom: 40px; } .face-img { height: 300px; width: 260px; margin: 30px auto; } .top-word { text-align: left; width: 800px; height: 330px; padding-top: 30px; padding-left: 20px; border-radius: 4px; flex-direction: column; } /*두번째 구간*/..

• format_list_bulleted CSS
• · 2023. 10. 6.
• textsms

[웹페이지 #01] 1.반응형 헤더 (HTML, CSS)

nav태그에 대해 인원1블로그주소 인원2블로그주소 인원3블로그주소 인원4블로그주소 현재 기온 : 태그 * 같은 페이지 / 다른 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션 * 태그를 태그 안에 사용하는 것이 일반적 .navbar a { text-decoration: none; /*태그 밑줄긋기 효과 없애기*/ color : white; } .navbar { display: flex;/*아이템들 가로로 나란히 배치*/ justify-content: space-between;/*같은 중심축 기준: 아이템 사이에 공백 넣기*/ align-items: center; /*수직축 중간 배치*/ background-color: #8EACCD; /*배경 색상*/ padding: 8px 12px; ..

• format_list_bulleted CSS
• · 2023. 10. 6.
• textsms