css3

[2021/12/22]국비지원 CSS3 4-(6) 가상element before, after

psuedo-element 중 진짜 가상 element ::before : 텍스트 기준, 기준점 element의 앞에 배치 ::after : 텍스트 기준, 기준점 element의 뒤에 배치 이미지의 경우, div가 기준점이 되고 z 축으로 볼 때 before가 앞에, after가 제일 밑에 깔리는 형태 before 기준 element after 로 전개되는 것으로 이해했는데 잘 모르겠다 사실; 이미지에 쓰는 경우는 반드시 psuedo-element에 position: absolute가 따랐기 때문에 (배운 바에 의하면) 가상의 콘텐츠를 이전(before)이나 이후(after)에 추가할 수 있는 선택자로 content 속성에 원하는 문자열을 지정할 수 있다. 결과물

[2021/12/21]국비지원 CSS3 3-(6) 과제5 : nhn 사업영역 클론코딩

수업 중 과제 5 이 날의 마지막 과제 nhn 사이트 ( N사 본사 ) 사업영역 이미지 클론 코딩 더보기 인간적으로 우리 강사 N사 미친 듯이 사랑하는 듯..? 다음카카오는 들여다본 적도 없음 사용한 css3 padding margin font-size font-family width border text-indent overflow text-align border-collapse backgroun-color { text-indent : -9999px ; overflow : hidden; } = 자리는 있는데 그 줄에서 화면 밖으로 날리는 방식으로 숨김 처리하는 법 { border-collapse : collapse; } = table 태그에서 기본적으로 있는 각 셀의 border 간격 (1px 정도 공..

[2021/12/21]국비지원 CSS3 3-(5) 과제4 : navigation list-style

수업 중 과제 4 navigation 이미지를 보고 클론 코딩하기 원본 이미지 사용한 css3 list-style-type font-family font-size line-height width background (통합 property) border-top text-indent color (font-color) 작업내용 ( 담임강사가 후에 보여준 답안대로 수정한 내용 ) 품질마크 navigation 품질마크소개 품질마크 개요 인증 절차 인증위원회 인증심사기준 품질마크 심사 접수 신규심사 갱신심사 진행상태 확인 인증사이트 현황 인증사이트 통계 당시 결과물 = 업로드 직전에 캡처 뜨려고 하다 발견하고 이 꼬라지 용납 못 하는 디테일 강박환자 a { color } .nav>li>ul { padding-lef..

[2021/12/21]국비지원 CSS3 3-(4) 과제3 : 영어속담

수업 중 과제 3 영어 속담을 표 형식으로 꾸며보기 사용한 css3 font-size font-family line-height list-style-type width border margin background (통합 property) letter-spacing text-align padding color (font-color) 작업내용 영어속담 Better later than never. 아무리 늦더라도 전혀 안하는 것보다는 낫다. Rome was not build in a day. 로마는 하루 아침에 이루어 지지 않았다. 결과물

[2021/12/21]국비지원 CSS3 3-(3) 과제2 : 3단 boxmodel

수업 중 과제 2 3단 boxmodel 사용한 css3 width height padding margin background-color font-size color (font-color) font-weight border 작업내용 Top Middle Bottom 결과물