IT&컴퓨터공학/HTML&CSS
-
[HTML] Form 태그IT&컴퓨터공학/HTML&CSS 2021. 3. 9. 10:09
Form 태그 웹 페이지에서의 입력 양식을 의미한다. ex) 로그인 창, 회원가입 폼 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 된다. 속성 action : 정보를 전송할 서버 쪽 스크립트 파일을 지정한다. 즉 Form 안에 button을 누르면 submit 이라는 동작을 진행하는데, 이때 action 값에 쓰여져있는 URL 로 이동한다. name : Form 을 식별하기 위한 이름 method : Form 을 서버에 전송할 http 메소드 지정 ( GET, POST )
-
[Bootstrap] 그리드 시스템IT&컴퓨터공학/HTML&CSS 2021. 3. 8. 18:11
Bootstrap 그리드 시스템 Bootstrap 이 가장 많이 사용되는 이유이자 반응형 웹페이지를 만들기 위해 가장 많이 사용하는 기능이며 가장 핵심적인 기능 중 하나다. Bootstrap에서는 기본적으로 12칼럼으로 나누어서 기능을 제공하고 있다. col lg 2 col lg 8 col lg 2 위 코드는 하나의 row를 2/ 8/ 2 로 나눈 것이다. ( col-*-숫자 에서 숫자부분을 보면 알 수 있다 ) 즉, 전체를 12로 했을 때 이 column의 비율을 몇으로 할지를 정하는 것이다. 전체 12를 초과하게 되면 자연스럽게 row가 바뀌면서 뒤로 밀려나게 된다. Bootstrap 권고사항 row 클래스는 container나 container-fluid 안에 있어야 정상적인 배열이나 패팅을 지원해..
-
[CSS] display 속성 : inline , block , inline-block 차이점IT&컴퓨터공학/HTML&CSS 2021. 1. 3. 20:34
display 속성 웹페이지 위에서 엘리먼트들이 어떻게 보여지고, 다른 엘리먼트들과 어떻게 상호 배치되는지 결정하는 속성 inline : 줄바꿈 X. 한줄에 다른 엘리먼트들과 나란히 배치 ex) , , 등의 태그가 이 속성을 가지고 있다. 주의할점 : width 와 height 속성을 지정해도 무시된다. margin 과 padding 도 좌우만 반영되고 상하는 반영 X block : 줄바꿈 O. ex) , , 등의 태그가 이 속성을 가지고 있다. inline-block : 기본적으로 inline 엘리먼트처럼 줄바꿈 X. 한줄에 다른 엘리먼트들과 나란히 배치 ! BUT width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해짐 ex) ,
-
[html5] 시멘틱 태그란?IT&컴퓨터공학/HTML&CSS 2021. 1. 3. 20:11
시멘틱 태그 시멘틱 태그는 html5 부터 문서의 구조와 의미를 표현하기 위해서 도입되었다. 장점 이런 시멘틱 태그를 이용하여 웹문서를 만들면 1. 문서를 이해하기 쉬움 2. 유지보수하기 용이함 3. 문서의 구조와 의미를 브라우저, 개발자 모두가 명확하게 알 수 있음 4. 웹에서 유저가 검색을 했을때 웹 페이지의 해당 코드를 찾아서 그 정보를 기반으로 의미있는 내용이 출력되도록 도와줌 즉, 기존의 non-semantic 요소들(, ..)이 자신의 컨텐츠에 대해 아무것도 설명해주지 않았다면, semantic 요소들(, , ..)은 자신의 컨텐츠를 명확하게 정의해준다. ex) 이전에 방식으로 아무 의미가 없었던 div에 임의로 이름을 붙여서 개발자끼리 암묵적으로 사용하던 룰을 로 사용하면서 브라우저와 개발자..
-
[CSS]div 와 span , class 와 id 차이점이 무엇인가?IT&컴퓨터공학/HTML&CSS 2021. 1. 3. 19:54
div 와 span ( non-semantic 태그 ) ※ 시멘틱 태그 와 논시멘틱 태그의 차이점을 알고싶다면 ↓↓↓ 2021/01/03 - [IT&컴퓨터공학/HTML&CSS] - [html5] 시멘틱 태그란? [html5] 시멘틱 태그란? 시멘틱 태그는 html5 부터 문서의 구조와 의미를 표현하기 위해서 도입되었다. 이런 시멘틱 태그를 이용하여 웹문서를 만들면 1. 문서를 이해하기 쉬움 2. 유지보수하기 용이함 3. 문서의 구조와 doing-nothing.tistory.com div : 줄바꿈이 자동으로 된다. span : 줄바꿈이 자동으로 되지 않는다. 왜 이러는 걸까 ? div : block 요소 -> inline 요소와 텍스트를 모두 포함 , 안에 block 요소도 포함가능 span : inli..
-
[HTML5] HTML5 의 기본구조 알아보기IT&컴퓨터공학/HTML&CSS 2021. 1. 2. 23:49
웹 개발할때 항상 사용하던 HTML5 ! 항상 원하는 부분만 찾아서 쏙쏙 사용해와서 기본기가 부족하다는 생각이들었다. 그래서 HTML / CSS 의 가장 기본적인 것 부터 블로그에 포스팅하면서 정리해보기로했다! : 항상 가장 먼저 선언되어야한다. 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문 : 이 파일은 html 이라고 정의내리는 것 : 페이지를 열면 웹 브라우저에 표시되지는 않음. , css 링크, 파비콘(favicon), 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용) 이 여기에 들어간다. ex) 같은걸 본적이있을것이다. 이 메타태그는 HTML 문서의 인코딩을 UTF-8 형식으로 하 라는 뜻 : 페이지를 열면 실제 웹 브라우저에 표..