목록HTML (19)
DevSSOM
Hide, Show, Toggle 이벤트 다음 제이쿼리 이벤트를 사용하여 특정 HTML 영역을 보이거나 감출 수 있음. $("h1").hide(); // 특정 영역을 감추기 $("h1").show(); // 특정 영역을 보여줄 때 $("h1").toggle(); // hide와 show 두 기능을 전부 가지고 있는 형태 실습문제 Hello jQuery hide show toggle 이런 HTML 문서가 있을 때, 제이쿼리로 index.js라는 파일을 만들어서 코드를 작성. 가장 먼저, hide 버튼을 클릭해서 h1인 'Hello jQuery'가 사라지게 만들면, $(function() { $("#hide").click(function() { $("h1").hide(); }); }); 이때, hide() ..
웹페이지 구조 상단 영역은 엘리스 사전 캐릭터 소개 줄거리 부록 >>> 하나하나 따라해보기 1. index.css 파일에 다음 속성값을 작성. 모든 영역에서 margin, padding을 0으로 설정하고, .container에서 기본 바 넓이를 960px로 설정. * { margin: 0; padding: 0; } .container { width: 960px; } 2. , 의 불렛 설정과 의 텍스트 설정을 적용. ol, ul { list-style: none; } a { text-decoration: none; color: #000; } 3. 상단 영역 전체 #intro의 넓이와 높이를 설정. width: 100%, height: 80px #intro { width: 100%; height: 80px;..
속성의 상속 & 부모 자식 관계 특정 태그가 다른 태그를 포함하는 관계. 예를 들어, Header h1 Header p 태그 안에 과 가 있으니까, 와 는 부모 자식 관계. 과 는 동급이니까 형제 관계. // style.css 문서 header { color: red; } h1 { color: blue; } p { color: green; } 그래서 에다가 color값을 red로 준거는 부모에다가 red 유전자를 집어넣은 거랑 똑같음. 그 유전자는 부전자전이라고 자식들이 상속 받기 때문에 자식들의 폰트 컬러도 red로 표시가 됨. 근데, 위에서는 그 자식들을 하나하나 직접 선택을 해서 다시 컬러 유전자를 입혔어. 그래서 각각 blue와 green이 되는 것임. Header h1 Header p Foote..
선택자(Selector) HTML의 어떤 요소에 CSS를 적용할 것인지 선택하는 방법. - Type : HTML 태그명을 다이렉트로 입력하고 CSS 적용. // Type Hello World - Class : HTML 태그에 class라고 하는 속성을 태그에 넣어서 별명을 지정하고, CSS에서는 .(점)을 사용해서 클래스 속성값을 입력. // Class Hello World - ID : HTML태그에 id라고 하는 속성을 사용해서 이름을 지정하고, CSS에서는 #(샵)을 사용해서 ID 속성값을 입력. // ID Hello World
Block 요소와 Inline 요소 내가 사용하는 태그가 인라인 요소인지, 블럭요소인지 알아야 레이아웃 작업이 원활하게 진행될 수 있음. 두 요소를 구분 짓는 세 가지 주요 특징은 다음과 같음. 줄바꿈 현상이 있는지 가로나 세로로 공간에 대한 크기를 만들 수 있는지 상하 배치작업이 가능한지 Hello devSsom Hello devSsom Hello devSsom Hello devSsom Hello devSSom Hello devSSom 위에처럼 태그를 연달아서 입력할 때, 글자들이 y축 방향으로 정렬되고 있는데, 이와 같은 특징을 가지고 있는게 Block 요소. ~, , , 등 공간을 만들 때 사용했던 태그들이 다 Block 요소임. 이 Block 요소들은 공간을 만들 수 있기 때문에, width, h..
웹사이트의 구조 책이 목차, 본문, 부록으로 구성되어 있는 것처럼 웹사이트도 목차, 본문, 부록이 있음. 웹사이트를 구성하는 태그들은 개발자마다 조금씩 다르게 쓰고 있어서 아래 설명하는 태그들이 모두 다 필수적으로 들어가는 것은 아님. , 태그 ... 태그 : 웹사이트의 머리글을 담는 공간. 사용자가 웹사이트에 접속했을 때 가장 먼저 보여지는 영역. 이 헤더 태그 안에는 보통 네이게이션이 담겨져 있는 경우가 많아. 그래서 네비게이션을 담고 있는 영역이라고 해서 태그를 같이 써줘. 태그 : 네이게이션과 관련된 정보들이 들어가는 공간을 의미. 메뉴 버튼을 만들 때 사용하는 , , 태그들과 함께 사용. 네이버를 예를 들어보면, 메일 카페 블로그 태그 안에는 보통 회사 로고를 넣어주기 때문에 태그가 들어감. 그..
링크를 넣을 땐 태그 태그는 텍스트, 이미지를 클릭했을 때 다른 웹페이지로 이동시키는 기능을 갖고 있음. 참고로 a는 Anchor(닻)의 약자. 네이버 href – 연결할 웹페이지의 URL 주소. target – 웹페이지를 연결하는 방식. target="_blank"면 새 탭으로 이동시키겠다는 의미. 위의 예시는 그래서 '네이버'라는 텍스트를 클릭하게 되면, 새 탭으로 네이버가 뜨게 됨. 만약, 태그 안에 태그를 넣으면, 로고 이미지를 누르면 네이버 홈페이지로 이동하게 됨.
HTML이란? Hyper Text Markup Language라고 해서 웹사이트에서 눈에 보이는 정보(텍스트, 이미지 등)나 특정 구역을 설정할 때 사용하는 언어. 예를 들어, 네이버는 아래처럼 구역이 설정되어 있음. HTML의 변화 시간이 지남에 따라 버전업이 되면서 자주 사용되지 않는 용어들은 사라지고 시대에 맞추어 새로운 신조어가 등장. 우리가 살펴볼 언어들은 html5를 기준으로 설명될 예정. 태그의 기본 구성 하나의 태그는 다음과 같이 구성됨. 컨텐츠 태그 : 열린 태그와, 닫힌 태그로 이루어져 있음. 몇몇 태그를 제외한 대부분의 태그들은 형태의 닫힘 태그를 꼭 작성해야함. 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용. 속성 : 태그가 갖고 있는 추가 정보. 속성값 : 어떤 역할을 수행할..