YJ의 새벽

display 속성 -- block : 화면을 수직분할 + width,height 사용가능 O -- inline : 화면을 수평분할 + width,height 사용불가 X -- inline-block : inline의 수평분할 + block의 크기조절 -- none : 화면에 요소가 표시되지 않으나, 존재는 하고있는 상태 -- flex : 요소의 정렬되는 방향, 간격을 유연하게 처리하는 방식 EX ))) block 형식 요소 div 를 inline 변경 1번영역 2번영역 3번영역 4번영역 5번영역 EX ))) inline형식 요소 span 을 block 변경 1번영역 2번영역 3번영역 4번영역 5번영역 EX ))) inline-block 확인하기 1번영역 2번영역 3번영역 4번영역 5번영역 -------..

반응형 웹 이란 ?? --하나의 웹사이트에서 PC, 스마트폰, 태블릿PC 등 접속하는 디스플레이 종류에 따라 화면 크기가 자동으로 변하게 만드는 기법. --다양한 종류의 기기에서 실행 가능. --화면의 변화에 즉시 반응 --어느 기기에서든 사이트 주소가 동일 --유지 관리의 편리성을 제공 반응형 웹의 단점 -- 예전 브라우저 버전과 호환성에 문제가 발생가능. -CSS3 기술이기때문에 인터넥 익스플로러 9 부터 지원한다. -하위 버전용 페이지로 이동할수 있도록 하거나 하위버전을 위한 라이브러리를 추가해야함. -- 사이트 디자인이 단순 -웹브라우저의 가로크기 값에따라 레이아웃이 바뀌어야 하기때문에. -그래픽 효과가 많을수록 화면 크기에 맞게 레이아웃을 변경하는것이 어렵다. -- 접속하는 기기를 인식해서 그에..

--성배 레이아웃. --성배 레이아웃은 5개의 영역으로 구성. -- 화면 최상단에 ( 헤더 header , 풋터 footer ) --그 사이 영역에 ( 네비게이션 nav , 메인 main , 사이드바 aside ) 영역으로 나누어짐. EX )))) 레이아웃 예제 111 223 333 EX ))) flex- direction 예제 The flex-direction Property The "flex-direction: column;" stacks the flex items vertically (from top to bottom): 1 2 3 ------------------flex-dirention : column ------------------flex-dirention : row -------------..

position ( 레이아웃 위치 ) --레이아웃 위치는 절대좌표와 상대좌표로 구분. --절대좌표는 엘리먼트가 브라우저의 페이지 안에 표시되는 방법을 지정하는것. --절대좌표 = position : absolute ; 로 사용. --절대좌표는 브라우저 왼쪽 상단이 기준점이 되며 , 오른쪽 하단의 지정된 좌표로 이동하여 표시 --모든 요소의 기준점은 좌측상단이 시작점 ( 0,0 ) = ( x,y ) --position속성은 지정한 요소들을 원하는 위치에 배치할 수 있는 속성. - 가장먼저 어디를 기준으로 위치시킬것인지 대상을 정해야한다. **position : relative = 요소의 위치를 절대값으로 설정 (기준 : 자기 자신 ) **position : absolute = 요소 위치를 상대적인 위치 값..

**float : 가로배치속성. ( 블록단위 ) left , right --레이아웃 배치를 위한 CSS 포지셔닝을 가로로 배치하는 float ( 한줄, 여러줄에 걸쳐 이미지와 텍스트랄 함께 출력 ) -- float 을 사용하지 않으면 기본적으로 세로로 배치. -- 블록 개념을 갖고있는 div 태그와 , 인라인개념을 갖고있는 span 태그를 함께 사용 --float 요소 뒤에 따라오는 형제 요소는 float 요소의 존재를 인지못하고 무시하여 배치. 즉, 형제요소끼리 float 요소의 영향을 받으므로 모든 형제 요소에게 float 속성을 적용해야함. ***float 의 문제점 --float을 사용한 요소들은 둥둥띄어져있기 때문에 다른 요소들과 겹칠수 잇다. --> 해결방법 : overflow : hidden..

** accept --입력받을수있는 파일의 유형을 지정하는 속성 --기본적으로 모든확장자 + 모든파일 ( * : 모든 파일이름. * : 모든 확장자 이름 ) --accept 속성을 지정하지 않으면 모든 유형의 파일을 입력받을수 있다. --여러종류의 파일을 입력받기위해서는 쉼표로 목록을 구분. ( .txt , .pdf ... ) ** MIME 타입 ( Multipurpose Internet Mail Extensions ) -- type/subtype --클라이언트에게 전송된 문서의 다양성을 알려주기위한 메커니즘. --웹에서 파일확장자는 별 의미가 없다. 그러므로 각 문서와 함께 올바른 MIME 타입을 전송하도록 서버가 정확히 설정하는것이 중요하다. --브라우저들은 리소스를 내려받았을 때 해야할 기본 동작이..

EX ))) 테이블의 경계선과 크기 예제 테이블 경계선과크기 예제 열차번호 출발시간 도착시간 100 서울 20:40 인천 21:00 101 서울 21:00 우크라이나 21:20 EX ))) 테이블예제 2 KTX 열차표 예매 열차번호 출발 도착 출발시간 특실 일반실 소요시간 175 서울 부산 21:00 02:44 177 서울 부산 21:30 02:38 179 서울 부산 22:00 02:42

Display ***display 속성 : 화면에 어떻게 보일지. none : 보이지않음 --요소를 렌더링 하지않도록 설정, visibility 속성을 hidden 으로 설정한과 달리, 영역도 차지하지않음. block : 블록박스 (한줄형식) -- div , p , h , li 등이 해당. -- 기본적으로 가로영역을 모두 채움. -- width , height 속성을 지정할수있음 . inline : 인라인박스 inline-block : block과 inline의 중간 형태 ***프레임이란 ? 현재 화면을 가르키는 용어 _blank : 새로운 탭에서 오픈함. _self : 현재 프레임으로 오픈함 _parent : 현재 프레임의 부모 프레임에서 오픈함 _top : 현재 윈도우 전체에서 오픈함 프레임이름 : ..