본문 바로가기

Html&CSS/html4&css13

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.
0217_display #display display:block; //숨긴것을 보여줄때도 사용 display:inline; display:inline-block; // 둘이 합쳐짐 display:none; // 컨텐츠 숨길때 사용 스크린 리더기가 못읽음(so, 안읽어도 되는 요소에만 적용) >주로 스크립트 작업때 많이 사용 함 예) 탭UI에서 탭버튼에 마우스 오버하면 해당 콘텐츠 노출 예) 페이징 버튼 방법 2가지 1) ul il(블록요소) a: 세로로 배치됨 2) div a(인라인요소) : 가로로 배치됨 1)방법은 세로기 때문에 가로로 배치해 주어야 함 부모: 가운데로 배치 2020. 2. 17.
0217_1교싱 #백그라운드 어태치 background: url("jongno_logo.gif") no-repeat 600px 400px fixed; 스플라이트 기법 > 아이콘 관리하기 푠함 (예: 다음 사이트 참고) #리스트의 작은 아이콘 백그라운드에 넣어주기 #overflow #display display:block; //숨긴것을 보여줄때도 사용 display:inline; display:inline-block; // 둘이 합쳐짐 display:none; // 컨텐츠 숨길때 사용 스크린 리더기가 못읽음(so, 안읽어도 되는 요소에만 적용) >주로 스크립트 작업때 많이 사용 함 예) 탭UI에서 탭버튼에 마우스 오버하면 해당 콘텐츠 노출 예) 페이징 버튼 방법 2가지 1) ul il(블록요소) a: 세로로 배치됨 2) .. 2020. 2. 17.
0213_css_border, margin, padding border 위로 선 표현 오른쪽 선 표현 아래 선 표현 왼쪽 선 표현 선 표현 선의 두께 선의 종류 선의 색상 padding 위로 여백 50 오른쪽 여백 50 왼쪽 여백 50 상하좌우 여백 50 상하 여백50 & 좌우 여백 10 상 50 우40 하30 좌20 상 50 좌우10 하30 상하 50 좌우10 margin 여백50 위로여백50 list-style 365민원 분야별 정보 소통과 참여 background-image 배경이미지(기본값) background-repeat 반복 가로 반복 세로 반복 반복하지 않음 background-position background-attachment background 2020. 2. 13.
0212_css_font-size font-size 부모요소의 크기에 상속받지 않고 적용 부모요소의 크기에 따라 상속받아 적용 font-family 글꼴을 구분할 때는 쉼표로 적용하고 한글 폰트명을 사용할 경우, 영문 폰트 명도 같이 작성하고 , 대표 폰트와 대체 폰트로 구분하여 표현한다. '한글폰트명',영문폰트명,대표폰트명, 대체폰트명 시스템 폰트 사용시에는 대표 폰트명 생략 color 16진수 표현: #000000 10진수 표현: rgb(255,0,0) 백분율 표현: rgb(100%,0%,0%) 색상 명: red, green font-weight 폰트 굵기를 normal(100~500로 표현 폰트 굵기를 bold(600~900) 로 표현 but 폰트에 따라 값이 다름 2020. 2. 12.
0212_css_클래스(class)&선택자 (2020/03/12) 클래스 선택자 인라인스타일 요소(html)에 스타일을 직접 선언하는 방식으로 권장하지 않음 내부 스타일 head안에 스타일을 선언하는 방식 외부 스타일 css파일을 생성하고 link태그로 선언하는 방식 클래스 선택자(class) 클래스 선택자는 문서내에서 여러번 사용 가능하고 요소와 클래스명을 구분 할 때는 점(.)으로 구분하고 클래스명 앞에 오는 요소명은 생략가능하다 아이디 선택자(id) 아이디 선택자는 문서내에서 한번만 사용 가능하고 요소와 아이디명을 구분할 때는 파운드(#)로 적용하고 아이디 명 앞에 오는 요소 명은 생략 가능 하다. first-child 첫번째 자식요소 입니다. 두번째 자식요소 입니다. 세번째 자식요소 입니다. 자식선택자(>) div의 자식요소 div의 자식.. 2020. 2. 12.
0211_form 요소 : 회원가입 어렵다 http://validator.kldp.org/ The W3C Markup Validation Service 파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사 validator.kldp.org Markup 검증 서비스 >유효성 검사/ all form form 요소 form form 요소 이름 비밀번호 웹디자인 웹퍼블리셔 웹프론트앤드개발 html css 과정 선택 웹디자인 웹퍼블리셔 웹프론트앤드개발 웹개발 산하부서 선택 총무과 기획예산과 자치행정과 문화과 홍보전산과 교육지원과 구매후기 확인 파일 첨부 강조 또는 중요하다를 .. 2020. 2. 11.

티스토리툴바