<head> 와 <body>의 큰 틀로 묶인다.

<head>안에  <style> 작성

<body>안에 큰 짜임새 작성

 

-<body>안에서 class="묶어줄이름" 으로 태그를 달고 <head>안의 <style>에서 꾸미는 서식 넣어줌.

 

ex)

class로 묶어준 그룹
style안에서 위의 묶어준 그룹 mytitle{} 로 꾸미기 서식 붙임

 

가운데 정렬을 위해서 가장 간편한 방법은

이 밑에 4줄은 꼭 항상 같이 다니는데 이  태그를 사용하면 padding을 쓸필요가 없이 엄청 편하다.

이렇게 모든 그룹이 화면 가운데 정렬이 됨

만약 가로로 정렬하고 싶다면

flex-direction에서 'column' 대신 'row'를 사용
가로로 정렬했을 때의 결과물

타이틀(내 생에 최고의 영화들) 밑에 버튼(영화 기록하기)

mytitle > button 으로 표기!!

더보기

* border : 테두리

* solid : 실

* border-radius : 테두리 둥글게

* margin-top : 윗부분과 간

***hover*** -> 버튼에 마우스를 가져갔을 때 테두리 굵게 표시

 

[배경화면으로 상어 이미지 첨부하기]

위에 세줄은 항상 붙어있음/ url만 변경해주면 됨
예뿌당


여기까지는 신기하게 잘 따라 완성을 했는데 

밑에 버튼 기록하기/닫기 버튼이 가운데 정렬을 아무리 해도 안되는 것이다..

대체 이유를 모르겠음..

선생님께서 완성하신 코드랑 내 코드랑 다 비교해가며 찾아봐도 틀린 점이 안보이고ㅠㅠㅠ

새벽까지 밤을 새며 4번이나 인강을 다시 들으며 처음부터 다시 코드를 작성해서 겨우 완성했다...

정말 짜증이 너무 났는데 완성하고 싶어서 환장하는줄

아직도 열받네.. 대체 뭐때문에 안된거지ㅡㅡ

우여곡절끝에 완성한 첫 페이지.......


1주차 숙제로 별점 넣는 것 까지 1분만에 뚝딱~

+ Recent posts