선택n집중

블럭 요소의 수직 마진 공유 특성. 중첩되는 수직 마진은 서로 상쇄되어 하나의 마진으로 공유된다.수직마진이 서로 다른 경우 중첩되어 상쇄되는 특징으로 인해,마진이 큰 쪽으로 수렴되어 통합된다.부모요소와 자식관계의 수직 마진을 지정시에부모요소 안에 자식 요소안에 배치되는데 수직 마진이 서로 닿지 않는 경우서로 공유 되지 않았음을 확인 할 수 있다.point ! 블럭 요소의 마진이 서로 맞닿는가 ?  2) 경우 두 박스를 동일 마진을 줌으로써 , 중간에 맞닿은 마진 부분이 상쇄되어 마진이 10px 20px 10px 로 보이는 것이 아닌10px 10px 10px 로 변경됨을 볼 수 있음. 3 )경우 두 박스를 다른 마진을 줌으로써,중간에 맞닿은 마진이 상쇄되면서 , 마진이 큰 쪽으로 수렴됨.20px 30px ..

viewport 를 알아보기 이전에 블럭 레벨 요소 와 % 단위의 특성을 한번 더 확인하고 가자. 블럭 레벨 요소는 높이는 내부컨텐트에 의해 결정되나 , 너비는 수평영역 전체를 차지. % 는 부모 요소를 기준으로 부모 요소의 컨텐트 영역 내에서 상대적 백분율 적용. p태그는 블럭 레벨 요소이다. 부모요소에 별도의 높이가 결정되지 않는 이상, p 태그의 높이에 대한 100% 지정은 부모 요소내에서 그 크기가 상대적으로 결정되는 % 단위의 특성과 내부 컨텐트의 크기에 의하여 높이가 결정되는 body 와 html등의 블럭 요소 특성이 서로 상쇄되어 의미 없는 높이 지정에 불과하다. p{ height: 100%; /*바보 코딩*/ } 부모의 컨텐트 영역 내에서 상대적 비율이 적용되는 % 단위의 특성으로 인해 p..

% / em / rem / root 를 쓰는 이유 ? 사용처에 의해 화면 배율이 달라졌을 경우 px 로 직접 지정한다면 , 추후 사용처 마다 직접 전부 수정해야 하는 단점이 있음. 하지만 비율로 적용 시키게 되면 , 사용처 마다 자연스럽게 비율로 따라가게 됨. % 단위 부모 요소를 기준으로 적용되는 모든 단위에 대한 상대적 백분율. 부모요소 중첩 , 계층별 부모요소에 % 단위가 각각 적용시 → 누적 비율 적용. section:nth-child(1) p { background-color: brown; font-size: 80%; /* 16px * 0.8 = 12.8px */ } section:nth-child(1) p strong { color: white; font-size: 150%; /* 12.8px..

인라인 형식의 링크 개별 태그내에 스타일을 지정하는 방식을 말한다. style 속성 내에 내부 속상 값을 : 으로 구분 표기 다른 내부 속성과 구분하기 위해 ; 로 표기 속성해 대한 값은 "" 으로 표기 /* head 내에 스타일 지정 */ Inline Style Sheet 목록 목록 목록 목록 div 폰트사이즈 문단 폰트사이즈 외부링크 CSS HTML 문서 외부에 정의된 CSS 파일 (확장자 : .css) 을 미리 저장해 두고 head 태그 내의 link 태그를 이용하여 css 파일에 정의된 스타일을 호출하여 가져오는 방식. 공통적인 스타일을 그룹화 함으로서 서로 다른 HTML 문서에 동일한 스타일 적용 가능. → 다음 CSS 기초에 대해서 더 자세히 알아보겠다.

select 태그(tag) 콤보 박스나 리스트 박스를 구성하기 위한 태그. option 태그로 구성된다. 콤보박스 - select 태그의 디폴트 값. 리스트 박스 - size 나 multiple 속성 지정시 리시트 박스로 구현. -size : 리스트 박스에 표시될 항목 수 지정. -multple : 목록에 대한 다중 선택 지정. option 태그(tag) select 태그를 구성하는 항목들을 지정 -value : 서버에 전송할 실제 데이터 -selected : 디폴트로 선택되어질 항목 지정. 콤보박스 (디폴트) 이메일 @ 직접입력 daum.net naver.com gmail.com yahoo.com 리스트박스(size 또는 multiple지정시) 선호하는 게임장르 전략시뮬레이션 RPG FPS 슈팅게임 스..

form 태그(tag) 의 정의와 속성 사용자의 의견이나 정보를 알기 위해 입력할 큰 틀을 만들 때 사용. 폼은 입력된 데이터를 한번에 서버로 전송. action : 폼을 전송할 서버 파일 지정. name : 폼을 식별하기 위한 이름, 식별자. 서버에서 식별자는 name 속성만 가능하며, id는 CSS 나 자바스크립트에서 구현 taget : action에서 지정한 파일을 어느 브라우저에 열릴지 지정. method : 폼을 서버에 전송할 http 메소드를 지정 . (get 또는 post, 디폴트 값은 get) (1. get : 소량의 빠른 데이터 전송에 유리하나 보안에 취약 / 2. post : 보안이 필요되는 데이터나 대량의 데이터때 사용) novalidate : form 그룹에 속해 있는 모든 태그 및..

a 태그(tag)의 속성 href : 연결할 주소를 지정한다. taget : 링크 클릭할때에 창을 어떻게 열지 설정한다. title : 해당 링크에 마우스 커서를 올릴 때 도움말 설명을 설정한다. a 태그의 대상은 텍스트 뿐 아니라 브라우저에 허용되는 범위에서 이미지나 문서, 동영상 등 가능. href 의 속성 페이지를 자동 스크롤 할 대상에 id 식별자를 부여하고 링크를 지정할 a 태그의 href 속성 값에 id 선택자 형식으로 지정함으로써 문서의 원하는 위치에 대한 자동 스크롤 가능. ( 자동 스크롤할 위치의 대상 태그에 대하여 id 식별자를 부여하고 링크를 할당할 href 속성의 값에 해당 id 식별자를 id 선택자 형식으로 할당함으로써 링크를 설정한 a 태그의 컨텐트를 클릭했을 때 id 식별자가 ..

ol 태그 ol 태그는 순번이 있는 글머리 항목. type 와 start 속성 지정이 가능 . 자식으로는 li 태그 , li 이외에 직접 올 수 없으나 li 의 또 자식 태그로 다른 태그 설정가능 li 태그는 기본적으로 들여쓰기가 적용 ul 태그 ul 태그는 순번이 없는 글머리 항목 자식으로는 li, 이외에 직접올 수 없으나 li 의 또다른 자식 태그로 다른 태그 설정 가능 li 태그는 기본적으로 들여쓰기 적용 list으 중첩 , 리스트 하위를 설정하는 경우 li 태그 이외에 다른 태그가 올 수 없음. li 의 자식태그로 다른 태그가 와야함의 주의. dl 태그 용어 또는 주제의 설명 형식으로 주제를 정하고 dd , dt 태그가 자식 태그. 다른 태그는 dd,dt 의 자식 태그로 사용 가능. dd 태그는 ..

-body 문서 내의 각각 영역 세션을 구분하기 위해 사용. 구역들을 나누는 태그. 영역들을 그룹화 하는 목적을 지님. -블럭 레벨 요소 -텍스트에 크기조절 , 좌우간격, 컬러 등 조절에 주로 사용. 영역을 그룹화 하는 목적을 지님. -인라인 레벨 요소 div 의 구체화 ,시멘틱 구조 태그 다수의 동일 div 태그 사용과 중첩으로 인해 코드 가독성이 떨어짐, 이를 보완하기위해 div와 동일한 기능을 하되 영역에 따른 고유한 명칭을 부여함으로 구저적인 가독성과 검색 엔진의 데이터 추출 효율성을 증대시킴. : 페이지나 문서의 상단에 배치하여 주제나 검색, 머리말등을 표시 및 그룹화. : 페이지나 문서의 주요 네비게이션(메뉴) 링크를 그룹화. : 페이지 본문 내용들을 그룹화. : 일반적으로 main 내부나 사..

HTML 그게 뭔데 ? - 웹(Web)에서 클라이언트(Client)에게 보여 주는 화면 구성의 기반이 되는 언어로써 “” 사이에 마크업 태그문자를 삽입하여 웹페이지의 속성이나 화면 출력 등의 기능을 표현. 확장자의 경우 기본적으로 “html"을 사용하나 3글자의 확장자만을 허용하는 시스템(유닉스 계열)과의 호환성을 위해 “htm”으로 표기 가능하며 이는 이식성에 유리. HTML 문서는 일반적으로 시작태크와 종료태그로 구성되나, 종료태그가 존재하지 않는 태그도 존재. HTML 문서의 기본 구조 형태 1. DTD(Document Type Definition) 선언 : 브라우저가 문서 종류에 따른 정확한 해석을 위해 HTML 버전 정보 명시. 2. html 태그 : html 태그의 속성(lang) 명시를 통한..