윤슬의 개발블로그

기본 드롭다운 목록 만들기 기본 드롭다운 목록을 만들기 위해선 태그와 태그를 이용해 주면 된다. ===선택=== North America Asia Africa Europe south America Oceania Antarctica 태그에서 name은 드롭다운 목록의 이름으로 전송 후 데이터를 참조를 위해 사용되어진다. 태그에서 value는 서버에 전송될 값으로 value값이 없을 경우에는 option 사이의 내용이 서버에 전달 된다. 태그 사이의 이름은 드롭다운에 표시될 이름이다. - 결과 HTML 삽입 미리보기할 수 없는 소스 기본값(default) 지정 ===선택=== North America Asia Africa Europe south America Oceania Antarctica 기본값을 지정하..

시맨틱 태그란 시맨틱 태그란 의미가 부여된 태그라는 뜻이다. 시맨틱 태그 중에 목록1 목록1 목록1 목록1 목록1 목록1 목록1 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 네이버의 웹페이지 목록처럼 잘 나오는 것을 볼 수 있다. 이것들을 활용하여 네이버 기본 구조를 만들어 보자! 네이버로고는 개발자 도구 탭에서 이미지를 들고 왔다. 코드는 더보기 탭에서 볼 수 있다. 더보기 - 예시 두번째 페이지로 세번째 페이지로 링크 목록1 목록1 목록1 목록1 목록1 목록1 목록1 공지사항 ​ - 결과화면 semantic 태그인 ,,태그를 이용하여 쉽게 구조를 잡고 만들 수 있었다.

태그란 요소는 현재 문서와 외부 리소스의 관계를 연결해 준다. 이 요소는 스타일 시트를 연결할 때 제일 많이 사용되어진다. 사용법 태그는 사이에 넣는다. 기본 구조는 다음과 같다.

태그란 태그란 사용자로부터 입력을 받을 수 있는 입력필드(input field)를 정의할 때 사용한다. 요소는 사용자가 데이터를 입력할 수 잇는 입력 필드를 선언하기 위해 요소 내부에서 사용되는데, type 속성값을 달리하면서 여러 가지 모양으로 나타낼 수 있다. 요소를 사용하면 요소의 라벨을 정의할 수 도 있다. 요소의 타입 요소의 타입에는 여러가지 종류가 있는데 그 중에 몇가지만 소개해보려 한다. Input type = text 는 텍스트 입력이 가능한 한 줄의 입력 필드를 생성한다. - 예시 Text : - 결과 HTML 삽입 미리보기할 수 없는 소스 Input type = number 는 숫자 값을 입력해야 하는 입력필드에 사용이 되며, 숫자의 범위도 설정할 수 있도록 한다. - 예시 number..

HTML 요소 타입 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는지 결정 짓는 DISPLAY 속성을 가진다. 대부분의 HTML 요소는 이러한 DISPLAY 속성 값으로 다음 두 가지 값 중 하나를 가지게 된다. 1. 블록(BLOCK) 2. 인라인(INLINE) 블록(BLOCK) 타입의 요소 display 속성값이 블록(BLOCK)인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 가로크기를 가득 차게 차지한다. - 예제 Block요소를 이용한 스타일 적용 블록 요소 확인하기 - 결과화면 HTML 삽입 미리보기할 수 없는 소스 \위의 예시를 보면 블록요소를 색깔을 주어 가로 크기가 가득차도록 차지하는 것을 볼 수 있다. ▶ , , , , , 요소는 display 속성값이 블록(blo..

텍스트 태그 중요한 내용 강조된 내용 이탤릭 이탤릭 위의 코드로 웹페이지를 생성하면 아래와 같은 화면이 나온다. 태그와 태그, 태그와 태그는 결과화면만 보면 똑같은 쓰임새라고 생각 할 수 있다. vs 태그는 실제로 웹페이지가 중요한 내용이다라는 것을 인식하여 그 정보가 저장되어있으며 태그 같은 경우는 그냥 진하게만 글자가 나오는 것으로 "굵게" 설정을 한 것과 같은 효과이다. vs 태그는 글자를 이탤릭표시로 보이게 하며 태그와 같이 중요한 표현이라고 웹페이지가 인식하게 한다. 태그는 그냥 이탤릭체로 보여주며 글자모양만이 바뀌게 한것이다. 이렇게 중요한 정보와 그냥 글씨 모양체를 쓰기위한 태그를 나눈 이유는 청각정보를 위해서이다. 예를 들어 시각장애인들이 웹문서를 읽을 때는 소리 내 읽어주는 프로그램을 사..

이미지 삽입하기 사용법은 img태그를 열고 src="이미지경로"를 적으면 된다. 위의 이미지 경로는 image라는 폴더 안에 "춘식1.png"라는 이름의 이미지를 불러오는 것이다. 결과화면으로 2가지이미지가 차례로 나오는 것을 볼 수 있다.

하이퍼링크(Hyperlink) 태그는 하이퍼링크를 걸어주기위한 태그이다. 네이버 페이지로 이동하기 사용법은 태그를 열어준 다음 href = "이동할 링크"를 넣어주면 된다 태그 사이 contents는 이름으로, 클릭하면 이동할 링크로 넘어가게 한다. 결과화면 위와 같이 하이퍼링크로 나타나게 되고 누르면 네이버페이지로 넘어갈 수 있다:) Index.html 인덱스페이지로 돌아가기 하이퍼링크를 지정할 때 이동할 링크로 슬래시(/)만 넣어주게 된다면 바로 index.html로 넘어갈 수 있는 하이퍼링크가 만들어 진다. 그래서 첫번째 홈페이지를 index.html이름으로 설정하고 하이퍼링크 불러오기를 할 때 슬래시(/)만 쓴다면 바로 첫번째 홈페이지로 돌아갈 수 있어 웹페이지를 만들 때 편리하게 사용할 수 있을..

HTML이란 HTML은 Hypertext Markup Language의 약자로 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다. HTML은 elements로 구성되어 있으며, 이들을 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 한다. 마크업은 태그로 구성되어있는데, 태그(tag)는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 한다. My cat is very grumpy 위의 문장을 웹페이지에 그대로 표시하고 싶다면 태그 중 로 감싸 엘리먼트를 문단으로 명시 할 수 있다. 태그는 문단(paragraph)의 약자로, 하나의 문단을 만들 때 쓰인다. HTML 요소(Elemnet)의 ..