전체 글 328

html로 선택 목록 상자 (콤보박스), 글 상자 만들기

select 는 선택 목록 상자 또는 콤보박스라고도 합니다. 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그입니다. (multiple 속성을 사용하면 다중 선택도 가능합니다.) 내부의 으로 각 항목을 나타냅니다. 의 속성으로는 selected가 있으며 이는 선택된 항목을 의미합니다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. textarea 한 줄만을 입력할 수 있는 와 달리 여러 줄의 텍스트를 입력할 때 사용합니다. 에는 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있습니다. cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 수치의 의미는 평균적인 글자의 너비로 정확히 ..

input type 종류 알아보기, 사용방법

폼 요소는 서버에 데이터를 전달하기 위한 요소이며 은 대표적인 폼 요소입니다. 은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 됩니다. type = "text" See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. placeholder "text"안의 글자 type = "password" 입력하면 특수문자로 나오게 된다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. type = "radio" 한 개만 클릭되게 하기 name 이라는 속성으로 같은 성격의 radio 버튼임을 명시해줘야 한다. 여자 남자 See the Pen Untitled by ..

테이블 구조, html로 테이블 그리기

표의 구성 요소 표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있습니다. 표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다. : 표를 나타내는 태그 : 행을 나타내는 태그 : 제목 셀을 나타내는 태그 : 셀을 나타내는 태그 하나의 은 하나 이상의 로 이루어져 있으며, 은 셀을 나타내는 , 를 자식으로 가지게 됩니다. 표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 됩니다. HTML 삽입 미리보기할 수 없는 소스 테이블을 어떻게 만드는지 외울 필요는 없지만, 구글링해서 만들 정도로 공부하면 된답니다~!

HTML에서 이미지 불러오기, gif jpg png 차이

는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그 입니다. src 속성 의 필수 속성으로 이미지의 경로를 나타내는 속성입니다. 상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이다. ./ 현재 페이지가 있는 폴더를 나타낸다. ../ 상위 폴더로 한번 이동하는 명령 하위폴더/이미지명 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다. alt 속성 이미지의 대체 텍스트를 나타내는 속성입니다. 대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성입니다. src 속성과 더불어 반드시 들어가야 하는 속성입니다. width/height 속성 이미지의 가로/세로 크기를 나타내는 속성입니다. 값의 단위는 필요하지 않으며, 값을 입력하면 자동으로..

HTML 요소 정리, 텍스트, 앵커(anchor),<div>태그와 <span>태그, 리스트 태그

텍스트를 꾸며주는 요소 : bold 태그는 글자를 굵게 표현하는 태그입니다. : italic 태그는 글자를 기울여서 표현하는 태그입니다. ( HTML5 버전에서는 의미를 가지는 태그) : underline 태그는 글자의 밑줄을 표현하는 태그입니다. : strike 태그는 글자의 중간선을 표현하는 태그입니다. (예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습니다.) 앵커(anchor) 요소 (anchor 태그)는 a태그, 앵커, 링크 등 여러 이름으로 불립니다. 링크를 만들기 위해 는 반드시 href(hypertext reference) 속성을 가지고 있어야 합니다. href 속성의 값은 링크의 목적지가 되는 URL입니다. 네이버 HTML 삽입 미리보기..

html 태그, <h1></h1>, <p></p>,<br>

HTML 태그 레퍼런스 https://developer.mozilla.org/en-US/docs/Web/HTML/Element http://html5doctor.com/element-index/ https://www.w3schools.com/tags/default.asp ⬆️ 사이트를 참고해서 수시로 공부하자. 모르는 것 있으면 여기서 확인해보기! 제목 태그 (heading) 제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그입니다. 태그 이름은 heading을 줄여서 h로 쓰며, 제목의 레벨에 따라서 ~까지 있습니다. 보통 은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며, 숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타내게 됩니다. 하지만 현재 웹 페이지의 내용은 제목과 ..

HTML 문법, 문서 구조, html 공백

HTML = Hyper Text Markup Language 웹페이지를 만드는 언어 Hyper Text = link HTML 문법 1. 태그 (tag) = 꼬리표, 이름표 Hello,HTML h1 = 태그이름 Hello,HTML= 브라우저에 노출 내용을 포함한 태그 전체를 요소(element)라고 한다. 2.속성 (attribute) 속성은 태그에 추가적으로 정보를 제공하고, 우리가 원하는대로 태그의 동작이나 표현을 조절할 수 있는 설정값들이기도 하다. 속성은 이름과 값으로 이루어져 있습니다. 시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현합니다. 속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현합니다. Hello, HTML 하나의 태그에도 여러 개의 속성을 선언할 수 있..

html 에 css 추가하기

CSS는 Cascading Style Sheets의 약자로 웹페이지의 레이아웃, 폰트, 색상 등을 지정하는 데 사용됩니다. HTML에 CSS를 적용하는 방법은 3가지가 있습니다. 1. inline 2. internal 3. external 1. inlne HTML 태그 안에 직접 CSS 속성을 적용하는 방법입니다. 이 방법은 style이라는 속성을 사용합니다. HTML 삽입 미리보기할 수 없는 소스 2. inaternal HTML 파일안에 이라는 태그를 이용하여 그 안에 CSS 속성을 지정하는 방법입니다. 이 방법을 사용하면, style 태그가 지정된 HTML 파일 전체에 CSS가 적용됩니다. HTML 삽입 미리보기할 수 없는 소스 3. external 마지막으로 CSS 파일을 따로 작성하고, 그 파일을..

'IT 용어 도감' 후기

미리에 아이티 업계에서 일할 것을 상상하며 빌린 책이다. 아이티 업계에서 일하거나, 관련 용어에 대해 쉽게 알고 싶은 분들에게 추천하는 책입니다. 책은 정말 쉽게 구성되어 있습니다. 용어마다 한 페이지씩 차지하고 있고, 가운데에는 그림까지 있어서 이해를 도와줍니다. 사실 이 책으로 모든 용어를 마스터하겠어!라는 목표는 힘들지 않나 싶다. 그냥 가볍게 읽으면서 상황에 따라 아! 이런 뜻이였지하면서 생각해내는 정도가 최선이지 않을까..? (실상은 생각도 안나고 구글에 찾는 방법이 가장 좋을 수도...)