1. div는 가로폭을 전부 차지한다.
1. span은 태그 안의 내용까지만 차지한다.
2. div는 폭과 넓이를 지정 가능하다.
2. span은 불가능하다.
3. div는 줄 바꿈을 동반한다.
3. span은 문장 중간에 들어갈 수 있다.
| CSS 반드시 기억해야 하는 선택자 30개 (0) | 2021.01.17 |
|---|---|
| CSS div 왼쪽, 오른쪽으로 붙이기 (0) | 2020.12.09 |
| button (0) | 2020.11.13 |
| CSS 공부 (0) | 2020.10.26 |
| HTML공부 (0) | 2020.10.26 |
반드시 기억해야 하는 CSS 선택자 30개 (tutsplus.com)
반드시 기억해야 하는 CSS 선택자 30개
여러분은 id, class, descendant 기초를 알고 있겠죠. 과연 그게 전부일까요? 그렇다면, 여러분은 폭넓게 적용하지 못하고 있네요. 이 글에서 설명하는 선택자 중에 다수가 CSS3 명세서에 있으며 모던
code.tutsplus.com
| HTML5 span 과 div의 차이 (0) | 2021.02.05 |
|---|---|
| CSS div 왼쪽, 오른쪽으로 붙이기 (0) | 2020.12.09 |
| button (0) | 2020.11.13 |
| CSS 공부 (0) | 2020.10.26 |
| HTML공부 (0) | 2020.10.26 |
<div style="float: right;">
<div style="float: left;">
| HTML5 span 과 div의 차이 (0) | 2021.02.05 |
|---|---|
| CSS 반드시 기억해야 하는 선택자 30개 (0) | 2021.01.17 |
| button (0) | 2020.11.13 |
| CSS 공부 (0) | 2020.10.26 |
| HTML공부 (0) | 2020.10.26 |
<button id="btn_back<%= u_id %>" class="btn btn-white w120">이전</button>
버튼을 눌렀을 때 팝업창이 나가지고 url창에 정보가 나오는 문제가 있었다 .
이유는 form안에 버튼을 나두어서 submit이 된 거였다.
보통 form안에 버튼을 잘 두지 않지만
안에 두고 submit을 하지 않으려면
<button type="button" id="btn_back<%= u_id %>" class="btn btn-white w120">이전</button>
타입을 지정해주어야 한다 .
<button>요소
URI를 연결하지 않고 단순하게 사용자 인터페이스만을 ‘조작‘하기 위한 버튼으로서 <button type="button"> 엘리먼트로 마크업 합니다. type을 명시하지 않으면 어떤 브라우저는 Form Submit 기능을 실행하기 때문에 반드시 type 속성을 button으로 지정해 주어야 합니다.
<input>요소
사용자의 입력을 서버로 ‘전송‘하기 위한 버튼으로서 <input type="submit">, <button type="submit"> 엘리먼트로 마크업 합니다.
| HTML5 span 과 div의 차이 (0) | 2021.02.05 |
|---|---|
| CSS 반드시 기억해야 하는 선택자 30개 (0) | 2021.01.17 |
| CSS div 왼쪽, 오른쪽으로 붙이기 (0) | 2020.12.09 |
| CSS 공부 (0) | 2020.10.26 |
| HTML공부 (0) | 2020.10.26 |
1. 인라인 스타일
2. 내부 / 외부 스타일 시트
3. 웹 브라우저 기본 스타일
인라인 스타일(Inline style)
인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.
예제
<p style="color:green; text-decoration:underline">
내부 스타일 시트(Internal style sheet)
내부 스타일 시트를 이용한 방법은 HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정합니다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다.
예제
<style>
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
</style>
외부 스타일 시트(External style sheet)
외부 스타일 시트를 이용한 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다.
스타일을 적용할 모든 웹 페이지의 <head>태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함하면 됩니다.
예제
<link rel="stylesheet" href="/examples/media/expand_style.css">
HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다.
예제
p { color: red; font-size: 14px; }
아이디(id) 선택자
아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다.
이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다.
예제
<style>
#para { color: teal; text-decoration: line-through; }
</style>
...
<p id="para">이 부분에 스타일을 적용합니다.</p>
클래스(class) 선택자
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다.
이러한 특정 집단을 클래스(class)라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해 줍니다.
예제
<style>
.paras { color: lime; text-decoration: overline; }
</style>
...
<p class="paras">이 부분에 스타일을 적용합니다.</p>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<p class="paras">이 부분에도 같은 스타일을 적용합니다.</p>
| HTML5 span 과 div의 차이 (0) | 2021.02.05 |
|---|---|
| CSS 반드시 기억해야 하는 선택자 30개 (0) | 2021.01.17 |
| CSS div 왼쪽, 오른쪽으로 붙이기 (0) | 2020.12.09 |
| button (0) | 2020.11.13 |
| HTML공부 (0) | 2020.10.26 |
웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다.
또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다.
<form action="처리할페이지주소" method="get|post"></form>
action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다.
이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.
method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다.
따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다.
method 속성
method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠진다.
GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식이다.
데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적이다.
따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용한다.
POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식이다.
데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없다.
따라서 보안성 및 활용성이 GET 방식보다 좋다.
readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정합니다.
disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점입니다.
disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정합니다.
disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없습니다.( 서버로 전송 안됨)
학과 : <br><input type="text" name="department" value="컴퓨터공학과" readonly><br>
학과 : <br><input type="text" name="department" value="컴퓨터공학과" disabled><br>
HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안입니다.
HTML5는 HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 차세대 표준입니다.
HTML5는 XML이나 XHTML과는 달리 문법적으로 매우 유연하게 대처합니다.
form 속성은 해당 input 요소의 위치에 상관없이 포함될 form 요소를 명시해 줍니다.
포함할 form 요소의 id 속성값을 공백으로 연결하여, 둘 이상의 form 요소에 포함할 수도 있습니다.
<form action="/examples/media/request.php" id="user">
사용자 : <input type="text" name="username"><br><br>
</form>
...
비밀번호 : <input type="password" name="password" form="user">
| HTML5 span 과 div의 차이 (0) | 2021.02.05 |
|---|---|
| CSS 반드시 기억해야 하는 선택자 30개 (0) | 2021.01.17 |
| CSS div 왼쪽, 오른쪽으로 붙이기 (0) | 2020.12.09 |
| button (0) | 2020.11.13 |
| CSS 공부 (0) | 2020.10.26 |