박보영 나무위키 페이지 만들기

대충 어딜 어떻게 손봐야 할지, 손에 익지 않은 구문등을 마구잡이로 적어놓아서 나만 알아볼 수 있음!

html : html 5 형식으로 작성하고 타이틀 수정, css파일 연결시키기

css : html fz는 16 , html, body는 0.9rem으로 설정 lh1.5, c#373a3c;

rem은 문서의 가장 최상단 폰트사이즈 기준
em은 자신의 부모요소의 폰트사이즈 기준

html : 최근 수정시각 입력

css : p.modified-date 의 ta:right

html : ul>li 상위문서를 리스트로 입력, 하이퍼링크 a로 걸기

css : a 의 기본 색깔 변경, 밑줄 제거(textdeco), hover가상 선택자(a:hover)사용하여 hover했을만 밑줄이 생기는 것 설정

가상 선택자 : 요소의 특별한 상태를 지정하기 위해 만들어진 추가된 키워드
콘텐츠 상태, 마우스 위치 처럼 외부 요인 관련 요소에 스타일 적용가능

html : ul요소 왼쪽 패딩 재정의 20px, arrow이미지 다운로드 후 삽입, arrow 이미지 클래스 정의

css : arrow클래스 w21, h21

html : 이미지 요소는 inline이므로 텍스트와 함께 한 줄을 차지할 수 있도록 div(class link-internal-container)로 감싸줌 span으로 텍스트 입력

div로 묶어주지 않으면 다른 요소가 차지할 여지를 줌

css : 화살표 이미지와 컨테이너의 자식들이 수직중앙정렬이 되도록 수정, div.~~ > * { vertical align: middle, 글과 이미지의 간격을 주기위해 이미지 margin right 4px

vertical-align은 inline 또는 inline-block요소에만 적용

html : 테이블 만들고 이미지, 내용 넣기. .wiki-table 정의,

css : .wiki-table에서 table-collapse 지정, 이미지가 너무 크므로 img 태그 재정의. 보통 태그의 정의는 맨 위쪽에다 쓰는게 보기 좋음. max-width: 100%; 부모 요소의 크기를 초과하지 않음, tr,td 텍스트 중앙정렬, 패딩 5,10px, td 배경색 #f5f5f5

css : 테이블 첫번째 로우만 스타일을 주기 위해 nth-of-type(1) 또는 first-child으로 설정 (동영상 30:10), 배경색, 글자색 변경(fff), fwb, tr의 first-child로 사진 배경색 변경. 부모의 색 inherit(상속)해보기

css : 메인 테이블 페이지 내 가운데 정렬(margin: 0 auto;)하고 최대 크기 정하기 (600), 배경 테두리색 정의

html : div으로 h2목차 + 리스트를 감싸서 toc클래스 정의

css : border정의 #ccc 패딩 0,20,18,12, maxwidth 400px, 테이블에서 마진을 0, auto 20px으로 설정

html : 소개, 테이블 작성, 동영상 삽입

css : 아까 작성한 테이블 스타일과 같으므로 그대로 적용, 동영상 크기 설정 max-width 100%

html : blockquote .wiki-quote p로 삽입

css : wiki-quote border설정, whitespace설정, 배경색 #eee, marginleft 0, 패딩 주고 p에는 마진을 0으로 설정, background-image: url(~~) background-repeat: no-repeat; background-position: 98% 2%; background-size: 25px;

• 1월 11일 1회 복습