Skip to main content

DasomOLI는 다솜돌이라구요~!

  • Login

[태그:] datetime

[WordPress] 워드프레스 기본 HTML & CSS 구조

2020년 5월 31일2020년 6월 10일 다솜돌이 Leave a comment

일단 테마를 위해서는 assets/style.css를 참조한다.

body element에는 모든 post page를 styling하는 post-template-default class를 볼 수 있다. postid-xxxx 같은 class도 있는데 이를 써서 각 개별 post를 style할 수 있다.


header 에는 h1.site-name element와 nav.navbar 가 있다. ul로 메뉴 아이템들을 둔다. li 에 id들이 붙는 것을 볼 수 있는데, 개별 li를 styling할 수 있다.

page content의 primary와 secondary sections이 div#content에 담긴다.

div#primary는 primary content가 담기는 곳이다. 이는 실제 post를 담는 article element를 포함하는 main#main element로 싸여 있다. article element는 많은 class를 갖고 있는데, 이들로써 그 post를 다양한 방법으로 지정할 수 있도록 한다.

article 안에는 article의 header, h2, 그리고 div.entry-meta 안에 metadata를 담고 있는 header element가 있다. datetime 속성을 가지는 time element와 작성자를 보이는 vcard 등이 있다.

div.entry-content에 article이 담긴다. h3 이하 제목과 p elements, link들 같은게 담긴다.

secondary content section은 툴바 같은 aside를 담는다.

맨 아래 footer element는 copyright 같은걸 담는다.

 

이 글 공유하기:

  • 클릭하여 X에서 공유 (새 창에서 열림) X
  • 페이스북에 공유하려면 클릭하세요. (새 창에서 열림) Facebook
  • LinkedIn으로 공유하기 (새 창에서 열림) LinkedIn
  • 클릭하여 친구에게 이메일로 링크 보내기 (새 창에서 열림) 전자우편
  • 인쇄하기 (새 창에서 열림) 인쇄
  • 더
  • Reddit으로 공유하기 (새 창에서 열림) 레딧
  • Tumblr로 공유하기 (새 창에서 열림) Tumblr
  • Telegram에 공유하려면 클릭하세요. (새 창에서 열림) Telegram
  • Pinterest에서 공유하려면 클릭하세요 (새 창에서 열림) Pinterest
  • 포켓에 공유하려면 클릭하세요 (새 창에서 열림) 포켓
  • WhatsApp에 공유하려면 클릭하세요. (새 창에서 열림) WhatsApp

이것이 좋아요:

좋아하기 가져오는 중...

License

크리에이티브 커먼즈 라이선스
이 블로그의 모든 글은 별도의 라이센스 표기가 없는 한, 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.

블로그 안 구글 검색

최신 글

  • [Python] Git 프로젝트 별 venv 사용법 정리
  • [ssh] config 파일에 IP와 Hostname을 함께 지정
  • [AWS] ALB 설정 백업
  • [Ubuntu] hostname 변경
  • [ethers.js] Transaction Data로 호출 당시의 argument 디코딩

최신 댓글

  •   DasomOLI는 다솜돌이라구요~![Ubuntu] cron-apt로 패키지 자동 업데이트 하기 - [Ubuntu] 자동 업데이트 설정
  •   DasomOLI는 다솜돌이라구요~!Transmission SSL 설정하기 - [RaspberryPi] Torrent 머신 만들기
  •   DasomOLI는 다솜돌이라구요~!Bkouen AK7 Pro Mini PC 사용기 - [Ubuntu] Bkouen MiniPC에 우분투 22.04 설치 후 발생했던 문제들 해결
  • 다솜돌이 - 부트캠프 Windows 10에서 에어팟프로 소리가 끊길 때 해결방법
  • sara - 부트캠프 Windows 10에서 에어팟프로 소리가 끊길 때 해결방법

보관함

카테고리

  • dasomoli (117)
    • 맛집 (5)
    • 유럽여행2008 (6)
  • Development (311)
    • Development/Python (10)
    • Development/Web (20)
  • Linux (87)
    • Linux/Ubuntu (46)
  • Mac (19)
  • Reading (14)
    • Reading/개인주의자 선언 (1)
    • Reading/나는 죽을 때까지 재미있게 살고 싶다 (5)
    • Reading/설득의 논리학 (2)
    • Reading/예언자 (1)
    • 감옥으로부터의 사색 (1)
    • 구글 엔지니어는 이렇게 일한다 (1)
    • 대화 (7)
    • 사피엔스 (4)
    • 새로운 언어를 배울 때 다시 풀어보는 57개 연습문제 (13)
    • 실용주의 프로그래머 (4)
    • 아이를 잘 키운다는 것 (5)
    • 어떻게 원하는 것을 얻는가 (1)
    • 프로그래밍 심리학 (6)
  • Study (51)
    • Study/English (47)
    • Study/SVP (25)
  • Utility Tips! (124)
  • 미분류 (1)

Powered by DNSEver

DNS Powered by DNSEver.com

메타

  • 로그인
  • 엔트리 피드
  • 댓글 피드
  • WordPress.org

자주 찾는 링크

100대 통계지표

Download Brave browser

Download Brave browser
sparkling Theme by Colorlib Powered by WordPress
%d