본문 바로가기

Spec UP - Frontend/부스트코스_UI 개발83

HTML_폼요소3 <label,fieldset,form> 태그 태그는 form 요소의 이름과 form 요소를 명시적으로 연결시켜줄때 이용하며 웹접근성 향상에 도움이 되기 때문에 필수적으로 선언을 해주셔야합니다. 기존 : 아이디 따로 text 상자 따로 선언되어있음 ->label : label의 id 속성값을 통해 아이디라는 텍스트와 text 상자의 관계를 연결함. 을 통해 관계를 연결한 경우 이를 클릭했을 때 해당 form 요소를 클릭한 것처럼 동작합니다. Ex: 아이디라는 글자를 누르면 옆에 텍스트 상자에 입력할 수 있도록 활성화 됩니다. 태그 이용 중 radio나 checkbox처럼 리스트목록 중 선택해야하는 경우에는 선택항목과 form요소가 잘 관계될 수 있도록 주의해서 설정해야합니다. Ex: 성별:남자 ㅇ 여자 ㅇ 인경우, radio체크박스는 남자/여자.. 2020. 3. 19.

HTML_폼요소 2 <SELECT,TEXTAREA,BUTTON> 태그 태그는 콤보박스(선택목록상자)를 만들때 이용합니다. 몇개의 선택사항들을 리스트로 표시하고 그 중 하나를 선택할 수 있도록합니다. (multiple 속성을 사용하면 다중선택도 가능합니다.) 태그 내부에 태그를 이용하여 리스트를 표시하며 속성값으로 selected를 설정하면 기본값으로 설정할 수 있습니다. 태그 태그는 여러줄 텍스트 입력상자입니다. cols 속성 : 가로크기 조절(한줄에 들어가는 글자의 수) row 속성 : 세로 크기를 조절하는 속성(화면에 보이는 줄 수) placeholder 속성 : 사용자가 텍스트상자부분을 클릭하기 전에 보이는 설명글 태그 Button type은 submit, reset, button 3가지타입으로 input 형식과 동일하지만 내용을 안에 직접 넣을 수 있기 때문에.. 2020. 3. 19.

HTML_폼요소 <INPUT> 폼 요소는 웹사이트에서 사용자로부터 데이터를 입력받아야 하는 경우 사용되는 요소입니다. : 서버에 데이터를 전달하기 위한 요소들. 대표적인 폼 요소로 다양한 type 속성으로 여러 종류의 입력 양식으로 나타난다. ex:) 여기서 type의 속성 값으로는 text, password, radio, checkbox, file, image, submit, reset, button 등이 있다. text 속성값 : 사용자가 입력할 수 있도록 텍스트 상자 생성. placeholder 속성값 : 사용자가 텍스트상자를 클릭하기 전 입력한 정보를 보여줄 수 있음. password 속성값 : 사용자가 데이터를 입력 시 암호화하여 화면에 보이지 않도록함. radio 속성값 : 주로 사용자가 목록 중 한가지만 선택해야하는 경우.. 2020. 3. 19.

HTML_테이블 요소(표) 표의 구성 요소 표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있습니다. 표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다. : 표를 나타내는 태그 : 행(row)을 나타내는 태그 : 제목 셀을 나타내는 태그 : 셀을 나타내는 태그 표의 테두리를 그리고 싶다면? html 문서에서 table태그 선언 시 테두리를 그리고 싶다면 CSS를 공부해야 원하는 모양으로 표현할 수 있습니다. 우선 간단하게 CSS를 설정하여 테두리를 만들어 보겠습니다. 표의 구조와 관련된 태그 : 표의 제목 표시 : 제목행을 그룹화 하는 태그 : 바닥행을 그룹화 하는 태그 : 본문 행을 그룹화 하는 태그 * 주의사항 * HTML 버전에 따른 의 위치 - 우선 태그는 바닥행을 가리키기 때문에 태그 전의 위치에 .. 2020. 3. 18.

HTML_이미지 요소 태그 는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈태그입니다. src 속성(필수) 태그의 필수 속성으로 이미지의 경로를 나타내는 속성입니다. alt 속성(필수) 이미지의 대체 텍스트를 나타내는 속성입니다. 대체 텍스트는 이미지를 설명하는 글을 뜻하며, 화면에 노출되지는 않지만 웹 접근성 측면에서 중요한 속성입니다. src 속성과 더불어 반드시 들어가야 하는 속성입니다.(Ex. 간혹 웹에서 엑박표시시 나오는 설명글) width/height 속성 이미지의 가로/세로 크기를 나타내는 속성입니다. 값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됩니다. width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인.. 2020. 3. 18.

HTML_리스트 요소(UL태그/OL태그/DL태그) 태그 ul(unordered list) 태그 : 순서가 없는 리스트 ul을 선언한 후 그 안에서 태그를 사용해 각 항목을 표시합니다. 태그 ol(ordered list) 태그 : 순서가 있는 리스트 ol을 선언한 후 그 안에서 태그를 사용해 각 항목을 표시합니다. 태그 dl(definition/description list) 태그 : 용어와 그에 대한 정의를 표현할 때 사용 태그는 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다. dl을 선언한 후 그 안에서 ,태그를 사용해 표현합니다. 태그 : 용어를 나타내는 태그 태그 : 용어에 대한 정의 또는 설명을 나타내는 태그로 한개 이상 쓰는것이 가능합니다. 2020. 3. 18.

HTML_의미가없는 컨테이너 요소 컨테이너 태그 : 태그 자체에는 의미가 없으며 단순히 요소를 묶기 위한 용도로 이용. 스타일을 주기 위해서나 또는 서버에서 보내는 데이터를 담기 위한 목적으로 이용. 태그 : division 블록레벨태그 블록레벨 요소는 기본적으로 모니터 화면 내에 한 줄을 생성해서 내용을 표현합니다. 태그 : 인라인레벨태그 인라인 레벨 요소들은 블랙 레벨 요소의 한 줄 안에서 표현되는 요소들입니다. 이전에 배운 는 블록 레벨 태그이며, 그 안에서 텍스트를 꾸며주는 ,,,는 모두 인라인 레벨 태그입니다. Ex: div태그와 span태그 2020. 3. 17.

HTML_앵커태그(Anchor) 태그 다른 문서로 이동할 수 있는 링크를 생성한다. herf속성 href : 링크의 목적지가 되는 URL을 지정한다. (하이퍼레퍼런스) ex: Click! 앵커태그 사이의 Click!을 누르면 href 속성의 값="URL"로 이동합니다. target 속성 링크된 리소스를 어디에 표시할지 나타냅니다. 속성값으로 _self, _blank가 대표적이며 타겟 속성을 지정하지않는경우 self 방식으로 동작합니다. self : 우리가 보고 있던 화면 자체를 외부 링크 페이지로 이동합니다. blank : 빈 창(새 탭)에 외부 링크 페이지를 표시합니다. ex: Click! 위의 _blank 속성값을 지정하지 않았을때와 비교해보시면 _blank를 지정한 경우 기존 창이 아닌 새탭으로 링크를 불러온 것을 확인 할 수 있.. 2020. 3. 17.

HTML_텍스트를 꾸며주는 태그 태그 글자를 굵게 표현한다. 태그 글자를 이탤릭체(기울임체)로 표현한다. HTML 5 버전에서는 특정 이유(기술용어/외국어문구/소설속인물의생각 등)을 구분하기 위한 의미를 부여하기 위한 목적으로 이용됩니다. 태그 글자에 밑줄을 표현한다. 태그 글자에 중간선을 표현한다. 이 외에도 텍스트를 꾸미기 위한 목적의 태그가 많이 있습니다. 아래링크의 Inline text semantics 단락의 태그 정보를 참고하세요! https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics HTML elements reference This page lists all the HTML elements, which are created using.. 2020. 3. 16.

HTML_제목과 단락 요소 제목(Heading) 태그 숫자가 낮을수록 더 큰 단위의 제목으로 사용됩니다. ~까지 표현 가능하며 ,를 주로 사용합니다. 단락(Paragraph) 태그 / 개행(LineBreak) 태그 태그는 문단을 구분할때 주로 이용하기 때문에 의미론적 표시를 갖습니다. 또한 문단 단위로 나누어지기 때문에 단락표시 개념으로 중간 여백이 표시되며 css를 통하여 조절이 가능합니다. 태그는 단락을 나누는 개념이 아닌 단순한 줄바꿈 개념으로 닫히는 태그 없이 이용합니다.(빈태그) 2020. 3. 16.

이전 1 ··· 5 6 7 8 9 다음

티스토리툴바