![]()
개요display 속성은 요소가 화면에 어떻게 배치될지를 결정하는 것으로, 여기서는 인라인(inline), 블록(block), 인라인 블록에 대해 정리해보겠다. 1. 블록(Block) 요소-> 전체 너비를 차지해 새로운 줄에서 시작된다.-> 가로 너비와 세로 높이를 지정할 수 있다.-> margin과 padding을 자유롭게 설정할 수 있다. 요소: : : ~ : , , : , , , 블록 요소 예제 이것도 블록 요소입니다. 얘도 블록 요소입니다. -> 위의 코드와 같이 작성하면 -> 이렇게 따로 떨어져서 나오게된다. 2. 인라인(Inline) 요소-> 내용의 크기만큼만 차지하며, 새로운 줄에서 시작되지 않는다.-> width와 height를 지정할 수 없다.-> margin과 padding ..
![]()
개요간단하게 HTML에 대한 내용은 정리를 했고, 이제 CSS에 대해 정리해볼 차례이다. 0. CSS란?CSS(Cascading Style Sheets)는 웹 페이지의 스타일(=디자인)을 정의하는 스타일 시트 언어이다.앞서 정리했던 내용처럼 HTML은 웹 페이지의 뼈대를 담당하면, CSS는 이 뼈대를 꾸미고 배치하는 역할을 한다. 1. CSS 적용 방법CSS를 HTML 문서에 적용하는 방법은 총 3가지가 있다. 1-1. 인라인 스타일(Inline Style)HTML 요소에 직접 style 속성을 사용해 CSS를 적용하는 방법이다. 파란색 글자 크기 16px.장점-> 별도의 CSS 파일이 필요하지 않다.-> 특정 요소에만 적용이 가능하고 빠른 테스트에 용이하다.단점-> HTML 태그마다 다 넣어야 하기 때..
![]()
개요이전 글에서는 이미지, 표, 링크 만드는 것 까지 했었는데 이번에 할건 사용자에게 입력받을 수 있도록 하는 form 태그와 input 태그이다. 이미지 & 표 & 링크 1. 태그사용자가 입력한 데이터를 서버로 전송할 수 있도록 하는 HTML의 태그이다.로그인, 회원가입, 검색 창 등 다양한 데이터를 입력하고 제출하는 기능을 구현할 때 사용된다. : action-> 데이터를 전송할 서버의 URL 또는 html 파일을 지정한다.(= 즉, 보낼 곳!) : method-> 데이터를 전송하는 방법을 지정한다. 사용자 입력 이름 제출 form 태그 안에 input 태그를 통해 사용자 입력을 받도록 했다. : label-> input 요소와 연결되어 입력 ..
![]()
개요HTML은 웹을 구성할 때의 뼈대 역할을 하는 것이고, 마크업 언어이기 때문에 다양한 태그들에 대해 저번 글에서 정리했었다.이번 글은 이미지와 표, 그리고 링크 태그에 대해 정리해보겠다. HTML과 기본 태그들1. 이미지 이미지는 태그를 통해 삽입할 수 있고, 닫는 태그 없이 사용된다. : src-> 파일 경로 : alt-> 이미지가 로드되지 않을 때 표시되는 대체 텍스트 : width, height-> 이미지의 높이와 너비 지정 상대 경로-> 현재 HTML 문서 파일의 위치를 기준으로 상대적인 위치에 있는 파일을 찾는 방식.절대 경로-> http:// 로 시작하는 도메인 네임이 포함된 인터넷 상의 유일무이하고 절대적인 URL 주소. 2. 표표는 태그를 사용하고, 행(, ) 태그로 구성된다. 기본..
