HTML5 & CSS3 : Mutimedia 관련 태그, 속성

HTML5 & CSS3 : Mutimedia 관련 태그, 속성

2022. 10. 25. 09:22ㆍStudy/HTML5 & CSS3

2022.10.25.

UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 28

Review

UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 28

<웹 페이지 메인화면 구현하기>

: 오늘부터는 선생님께서 HTML 파일과 CSS style 파일을 따로 구분지어 만들도록 하셨다.
이때까지 배운 이론들을 가지고 웹 페이지를 만들 때 응용해보는 예제를 실행했다.

- HTML

우선은 각 구역을 구분지어 만들어놓았다.
전체를 감싸는 wrapper div, 하위에 8개의 div를 만들었다.

top div에서 하위에 top_wrap이라는 div를 하나 더 생성하고, 그 하위에 ul과 li 태그를 이용해
작성했다. 링크로 만들기 위해 li 태그 안에 a 태그를 삽입했다.

logo div에서는 img 태그를 이용해 이미지를 넣고,
gnb div에서는 메뉴를 만들기 위해 ul과 li 태그를 작성하고, 안에 a 태그를 이용해 링크로 만들어
주었다.
visual div에서는 메뉴 밑에 메인 이미지를 삽입하기 위해 img 태그를 이용했다.

icon div에서도 ul, li 태그를 작성하고 안에 이미지를 넣어준 뒤,
마우스를 올리면 'ABOUT' 이라는 문구로 변하게 하기 위해 p 태그를 밑에 작성해주었다.

item div에서도 마찬가지로 hover 상태에서 문구가 나타나게 하기 위해 img 태그 밑에
p 태그를 작성해주었다.

banner div에서도 위와 마찬가지로 같은 방법을 사용했다.
p 태그 밑에 a 태그를 이용해 링크도 넣어주었다.

foot div에서는 하위에 foot_wrap div를 하나 더 만들어주고, 그 하위에 ul, li 태그를 이용했다.

각각의 li를 만들고 그 안에 img, p, a 태그를 이용해 원하는 문구, 이미지를 삽입했다.

그러면 위와 같이 나타난다.

HTML의 윤곽은 일단 이렇게 잡아 놓고 CSS로 들어가보자.

- CSS

CSS 파일을 따로 만들어 연결시키겠다는 의미로 HTML에서 link 태그를 삽입해주어야한다.

이제 style.css 라는 파일을 만들고 나서, @charset "UTF-8"; 이라는 선언을 꼭 해야한다.
웹 페이지를 만들 때 위의 문법은 디폴트로 작성하고 시작하면 된다.
font-family는 물론 원하는 font로 변경해주어도 된다.

우선 #top에서 background를 먼저 설정해준 뒤, width를 1182px로 설정한다.

가로 값을 1182px로 설정한 이유는 메인 화면에 들어갈 이미지의 가로 값이 1182px이기 때문이다.

.top_wrap에서 display를 flex로 설정하고 justify-content: end;로 설정해 제일 끝으로 붙여준다.

또 margin: 0 auto;를 작성해 전체 body에서 .top_wrap 구역이 가운데로 오도록 설정한다.

.top_wrap ul에서 한번 더 flex를 줘야 완벽하게 가로 정렬이 이루어진다.

.top_wrap ul li a에서는 font color를 흰색으로 설정했다.

추가로 .top_wrap에서 여백을 좀 주기 위해서 padding을 위/아래에만 두었다.

.top_wrap ul li a::after에서는 ::after 라는 가상요소를 사용한다.

content 속성을 이용해서 a 태그에 작성된 문구 뒤마다 "|" 를 넣어주기 위함이다.

padding은 좌/우에만 두어 a 태그 속 문구 사이마다 여백을 두었다.

.top_wrap ul li:last-child a::after에서는 마지막 li 태그에 있는 a 태그의 끝은 "|" 를 빼겠다는

문법을 작성한다. content: ""; 라는 말이 큰 따옴표 속을 비워둔 것이 그 뜻이다.

.top_wrap ul li a:hover에서는 a 태그가 hover 상태일 때 밑줄이 표시되도록

text-decoration: underline; 이라고 작성한다.

결과는 위의 이미지처럼 나타난다.

#logo에서는 width 값을 설정하고 margin을 0 auto;로 설정해 가운데 정렬을 했다가,

위/아래를 띄우기 위해서 50 auto;로 설정했다.

#gnb ul 에서는 flex를 주었는데, 이유는 메뉴를 가로 정렬하기 위해서다.

justify-content: space-around;로 두어 메뉴 사이에 간격을 줬다.

#visual img에서는 object-fit 속성을 사용했는데, img 태그나 video 태그 같은 오브젝트의

크기를 컨테이너의 크기에 맞춰 조절할 수가 있기 때문에 사용했다.

너비와 높이값을 입력하고, 속성값은 cover로 작성했다.

cover는 가로 세로 비율을 유지한 채로 사이즈가 조절되며, 비율이 맞지 않더라도

이미지를 확대해 컨테이너를 완전히 채운다.

#icon ul에서도 마찬가지로 아이콘들을 가로 정렬하기 위해 flex로 두고,

justify-content: space-evenly;로 설정해 간격을 주었다.

object fit
contain, cover, scale-down,

object-position
기본값이 center, 그 외에는 left top, left bottom, right top, right bottom 등이 있다.
아니면 수치로 작성해도 된다.
예를 들어 object-position: 0 0;으로 작성하면 left top과 같은 결과이다.

width: 100%, max-width: 1182px;
1182px 보다 작아지면 width: 100%를 쓰겠다는 말. 현재 가로의 width를 다 쓰겠단 말.

<HTML Multimedia에 관련된 태그와 속성 이론>

<audio, video 태그 알아보기>

오디오 파일을 연결했더니 크롬에서 실행할 수가 있다 !
완전 신기하다 -
이렇게 웹 페이지에 삽입하는거구나

object-fit 속성을 이용하면 비율을 깨지 않고

overflow: hidden;을 사용하면 스크롤 바도 사라지게 된다.
내용이 구간을 넘어가게 되면 숨기는 것이다.

<iframe 태그 알아보기>

24/7 가을의 포근한 그레이트홀에서 자습하기 ☀️ Great Hall, Study, Ambience, Harry potter, ASMR, Fantasy - YouTube

평소 유튜브에서 자주 듣는 해리포터 asmr 영상을 퍼왔다.

아직도 해리포터 덕질하는 나....

오늘도 그리핀도르 출첵했슴미당,,

<::marker, first-letter, :selection 속성 알아보기>

<해피바스 메인 화면 구현해보기 예제>

: 이 예제는 시간이 없어서 visual div 까지만 실행해보기로 했다.

- HTML

- CSS

아까 버켄스탁 메인 화면 만들기 예제에서와 같이 디폴트를 이렇게 시작한다.

바뀐 것은 이번엔 데스크탑에 다운 받아 놓은 폰트를 불러왔다.

header 부분에는 background를 넣어준다.

.top_menu에서는 flex를 주고 나서 justify-content를 flex-end로 두어 오른쪽으로

붙인다. width 값을 1000px로 주고 margin: 0 auto;로 설정하여 총 가운데 정렬시킨다.

.top_menu ul에서도 flex를 주면 가로 정렬된다. background를 흰색으로 설정하고,

background의 border를 아래 부분만 둥글게 설정해준다.

box-shadow 속성을 이용해 그림자도 넣어주었다.

padding은 원하는 만큼 설정하면 된다. 4개의 값을 넣어준 것은 위, 오른쪽, 아래, 왼쪽 순으로

들어간다.

.top_menu a에서는 font color를 검정색으로 두고, font-size도 설정한다.

.top_menu ul li a::after에서는 a 태그 속 문구의 뒤마다 "|"가 들어가도록 해주고,

좌/우에 padding을 주어 여백이 생기도록 했다.

.top_menu ul li:last-child a::after에서는 마지막 li 태그의 a 태그 속 문구의 뒤에는

"|"를 제거하도록 설정했다.

그러면 위와 같이 나타난다.

자 여기서 이미지를 위로 끌어올리려면 2가지 방법이 있다.

position 속성을 이용하든지 아니면 margin에 음의 값을 주든지 선택하면 된다.

첫번째 방법은 margin에 음의 값을 주어 위로 올리는 것이다.

그러면 위와 같이 나타난다.

두번째 방법은 .visual에서 position: relative;로 설정한 상태에서 top의 값을 조절해도

결과는 위와 같다.

'Study > HTML5 & CSS3' 카테고리의 다른 글

HTML5 & CSS3 : input 태그 속성 응용 (0)	2022.10.27
HTML5 & CSS3 : 회원가입 창 만들기 - input 태그 (1)	2022.10.26
HTML5 & CSS3 : picture 태그, object-fit 속성 (0)	2022.10.24
HTML5 & CSS3 : 웹 사이트 메인 화면 구현해보기 (0)	2022.10.21
HTML5 & CSS3 : 팝업창 만들기, text-shadow, box-shadow, a 태그 (0)	2022.10.20

인기 검색어

최근 게시글

아카이브

'Study > HTML5 & CSS3' 카테고리의 다른 글

관련글

티스토리툴바