월드스토리의 코딩 나라

Position1. static : 정적 위치 지정 방식(기본값)2. relative:상대 위치 지정방식3. absolute: 절대 위치 지정방 식 ->static이 아닌 조상이 기준4. fixed : 고정 위치 지정방식 => 뷰포트(브라우저)를 기준으로 배치 요소 쌓임 순서1. 어떤 요소가 사용자와 더 가깝게 있는지를 결정2. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static)3. 2번 조건이 같은 경우, z-index 속성의 숫자값이 높을 수록 위에 쌓임.4. 2~3번 조건까지 같은 경우, html의 다음 구조일 수록 위에 쌓임.#. z-index : 요소의 쌓임 정도를 지정함(position이 static이 아닐때만 반영됨)#. position 속성의 값으로 absolut..

목차 CSS 작성법  선택자 : 각각의 정의 요소들이 어떤 html 태그에 css를 적용시키는지 알려주는 지시자.속성 : 실제로 적용되는 속성의 종류이며, 여러개의 프로터피를 연속해서 지정할 수 있고, 사용자가 임의로 정의하여 사용용할 수 없다는 특징이 있다.값 : 실제로 해당 속성들에 대하여 적용되는 값을 말하며, 키워드나 크기 단위 또는 색상 등의 단위로 나타낸다.CSS 선택자#. 기본 선택자 전체 선택자 : *{color : red;}테그 선택자 : li {color: red;}c클래스 선택자 : .orange { color : red;}                          오랜지 아이디 선택자 : #orange {color : orange;}                         ..

목차  CSS란?- Cascading Style Sheet의 약어- 웹 페이지의 빼대인 html 파일의 각 테그에 디자인을 입히기 위한 언어 개발자 도구- 단축키는 F12, 브라우저에서 개발 편의를 위해 제공하는 도구- 현재 띄워놓은 페이지의 HTML, CSS, Javascript를 볼 수 있다.- 해당 코드를 수정하여 자기 마음대로 변경이 가능하나, 새로고침을 하면 서버 내의 페이지에 대한 자료는 변하지 않기에 그대로 출력된다.- HTML과 CSS를 할 때 미세한 수정을 미리 해볼 수 있기에 자주 사용된다. CSS의 참조 방식 세가지. 인라인 방식 html 테그마다 style 이란 속성값을 이용해, 일일히 표시해주는 것이다.그러나 아래와 같은 스타일을 가진 테그를 사용하려고 해도 코드를 복붙해야 해서,..

목차목차- html에서 이미지를 넣어줄 때 사용하는 태그- 속성값 중 하나인 src = "이미지의 위치"를 사용함.- 이미지가 로드되지 않을 경우, 사용자가 알 수 있도록 문구를 띄워주는 alt라는 속성값이 존재함.- alt = "이미지가 로드되지 않았습니다." - Anchor의 약자로 하나 의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용함.- 적용한 속성에는 href와 target이 존재함- 여기서, target 속성에는 _self와 _blank가 존재한다.- _self 는  현재 창에 링크를 오픈한다는 의미이다.- _black는 새 창(또는 탭)에서 링크를 오픈한다. #. 절대 경로와 상대 경로   상대 ..