본문 바로가기

Html&CSS71

0219_html4/css_예제5_게시판(원래있던거 모르고 삭제함ㅠ) 전체 박스 div 게시판 제목 박스 : div 게시판 제목 : h2 로케이션 로케이션 작업 방법 3가지 1. p ( 2020. 2. 19.
0219_html4/css_예제4_기초실습1 div h3 글자 p 입력칸: lable(접근성 높이기 위해) input form : 정기구독신청 , input type image 글자 p 구독신청 이메일 입력 2020. 2. 19.
0219_html4/css_예제3_기초실습 1(계속)-파일다시업데이트(완료) 1. 이미지 줄이기 2. float 주기 float 해제하는 방법 overflow: hidden display inline-block float cler :after 2020. 2. 19.
0218_html4/css_예제3_기초실습 1 작성 순서: HTML 작성 -> HTML 마크업 검사 -> css 작성 1. div #1 2. h3 : story 3. span: five #2 4. 리스트 박스 만들기 방법: 1. ul li a or 2. div a >>1사용 : 이유, 이미지, 글자 모두 선택해도 선택 가능 하게 하기 위해서 img h4/p : p태그 못씀 왜? a태그가 인라인 요소 이기 때문 strong span #3 5. 더보기 버튼 만들기 > p/span a img 코딩 순서 >>> 사용자의 시선과 동일하게 코딩해 내려가는게 스크린리더기가 더 자연스럽게 읽어줄 수 있음 노트북, 휴대폰에 스크린 리더기가 탑재되어 있음 2020. 2. 18.
0218_html4/css_예제2_기초실습2 1. h3 2. div 3. ul li a 2020. 2. 18.
0218_html4/css_예제1_기초실습2 HTML 작성 --> CSS 작성 1. div 로 전체 감싼다 2. 1번재 글자 : 강조 3. 2번째 문장 > p태그 h3 홈페이지 신규 오픈 프로모션 당첨자 발표 링크 문법 제대로 사용했는지 검사하기 파일 업로드 해서 검사하기 https://fonts.google.com/?selection.family=Nanum+Gothic:400,700,800 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 폰트 스타일 지정하기 2020. 2. 18.
0218_Position Position position:relative는 자신을 기준으로 위치값을 갖고 top, left, right, bottom 속성에 값을 지정하여 표현한다 position:absolute는 자신을 포함하고 있는 컨테이닝을 기준으로 위치값을 갖고 top, left, right, bottom 속성에 값을 지정하여 표현한다. 또한 자신을 포함하는 부모는 position:relative가 되어 있어야 한다. z-index border-collapse !important #abc . abc li{color:#f00} .abc . abc li{color:#f00} >>이럴떄 사용 box-sizing(ie7지원 안됨) 2020. 2. 18.
2017_clear 2020. 2. 17.
0217_5 .float-none{border: 2px solid green} .float-none .none{border:2px dotted red;}/*부모 영역인 ul태그*/ .float-none .none:after{content: ''; display: block; clear: both}/*부모영역안에 자식 영역이 들어가게됨------잘 모르겠어요 !!!!!!!!!!!!--*/ .float-none li{border: 2px solid orange;/*자식 영역인 li태그:블록 요소라서 아래로 '기본배치'가 됨*/ float:left}/*블록 요소를 가로로 배치 시킴*/ .float-none li:first-child+ li{float:none}/*두번째에 float안함(간혹 사용)*/ 3. float:no.. 2020. 2. 17.
0217_float float: 레이아웃 잡고, 콘텐츠를 배치 시키는 방법 postion과 float는 전혀 다른 개념임 (가급적 postion쓰지말긔) 이미지 배치 시키기: 왼쪽으로 띄울 것이다 이미지 컨텐츠를 왼쪽으로 띄울 것이다(떠있게하기 때문에 이미지 아래쪽은 비어있는 공간이됨) float 하면 부모에서 벗어남 so, float를 부모 영역 안에 넣어주어야 함(>>float는 ie6을 위해 존재함. 몰라도됨 after, overflow:hidden 많이 씀쓰.. 2020. 2. 17.