본문 바로가기

레이아웃2

티스토리 스킨 커스텀! (w. HTML & CSS) html과 css를 어느 정도 배워서 드디어 이 블로그를 내 입맛대로 바꿔볼 수 있게 되었다! 그동안 염원해왔던 것들을 만들어보았고 점점 추가하거나 제거할 예정이다. 직접 바꿔보니 너무 재밌고 계속 더 공부하고 싶어졌다! 티스토리도 계속 좋은 방향으로 바꿔보면서 얻어낸 경험으로 나의 웹사이트도 제작해볼 예정이다. 1. 모바일 환경 카테고리 초상화 변경 초상화의 크기를 바꾸어 주었다. 바꾼 코드 @media screen and (max-width: 767px) #aside .sidebar-1 .profileBox ul li { width: 100%; height: 17em; } 미디어 조건을 통해서 모바일 환경의 해상도의 경우에 해당 선택자에 속성을 부여해주었다. 2. 글꼴 변경 바꾼 코드 @import .. 2022. 1. 31.

HTML 시멘틱 태그 (레이아웃 설계) semantic : 의미론적인, 의미를 가지고 있는 HTML5 이전에 레이아웃을 구성할 때 div에 클래스를 부여하며 구성하였다. 이는 html파일이 길어지고 div를 계속 반복해서 사용해야한다. 그 이후 sementic태그의 등장으로 효율적이고 직관적으로 구성할 수 있게되었다! 종류 .container : 가장 상위 section : 주제별 컨텐츠 영역 header : 헤더 영역(로고, 메뉴 등) footer : 푸터(제작 정보 등) aricle : 컨텐츠 내용 nav : 문서 링크 탐색 main : 문서 주요 내용 지정 단계 .container>section, header, footer>article>div 레이아웃 만들어보기(가상클래스 X) .container { border: 1px solid #.. 2022. 1. 5.

이전 1 다음

티스토리툴바