본문 바로가기
728x90

[ View ]/HTML6

[ HTML/CSS ] 레이아웃과 애니메이션 오늘은 CSS3 Style 레이아웃 배치 방식과 애니메이션 효과 처리 하는 방법을 포스팅해보려 합니다! ■ 레이아웃(Layout) Layout이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. HTML요소는 블록 요소이거나 인라인 요소 중의 하나에 속합니다. 블럭 요소(block) : 한 줄을 전부 차지한다. , , , , , , , , AAA BBB CCC DDD EEE FFF GGG HHH KKK MMM NNN 지금까지 레이아웃에 대해서 알아봤습니다. 그럼 요소의 위치를 지정하고 화면 배치할 때 활용되는 스타일 속성에 대해서도 알아봅시다. ■ 좌표값 지정 요소의 위치는 top, bottom, left, right 속성으로 결정합니다. 각 요소의 속성의 의미는 아래 표.. 2023. 2. 21.
[ HTML/CSS ] CSS3 박스 모델과 응용 오늘은 CSS3 스타일 박스 모델을 어떻게 응용하는지에 대한 포스팅을 해보려 합니다! ■ 박스 모델(Box model) 웹 브라우저는 각 HTML요소를 사각형으로 간주하고 웹 페이지 위에 그리게 됩니다. 요소를 배치할 때도 사각형으로 간수하는데, 이런 식으로 요소를 박스 형태로 그리는 것을 박스 모델이라고 부릅니다. 박스는 배치, 색상, 경계 등의 속성을 갖고, HTML요소를 margin(바깥쪽 여백), border(경계선), padding(안쪽 여백), content(내용)으로 구분합니다. margin : 테두리와 이웃하는 요소 사이의 간격입니다. margin은 눈에 보이지 않습니다. border : content와 padding을 감싸는 테두리 입니다. padding : content와 border .. 2023. 2. 20.
[ HTML ] CSS3 스타일 시트 기초 오늘은 CSS 스타일 시트에 대해서 포스팅해보려 합니다. ■ CSS(Cascading Style Sheets) CSS는 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정합니다. 1 ) CSS 특징 HTML에 문서의 구조를 지정하는 태그와 스타일을 지정하는 태그가 섞여 있으면 유지보수 하기가 어렵다. 스타일을 지정하는 부분은 CSS로 분리하는 것이 바람직함. 동일한 요소를 가진 웹 페이지도 CSS가 달라지면 다른 모습으로 표현될 수 있다. 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 2 ) CSS의 기능 선택자(selectors) 박스 모델(Box Model) 배경.. 2023. 2. 17.
[ HTML ] 입력 양식 오늘은 웹에서 사용자 입력을 처리하기 위한 입력양식의 종류와 사용법을 포스팅해보려 합니다. ■ 입력 양식 입력 방식이란 기본적으로 사용자가 정보를 넣을 수 있는 입력 필드를 가지고 있는 웹페이지입니다. 게시글 포스팅 등 무언가를 입력해서 서버로 전송하거나 상품 주문 시 옵션을 선택하고 주소를 입력하고 주문 버튼을 누르는 등의 모든 화면들이 입력 양식에 해당합니다. 좀 더 정리해 보자면 아래와 같습니다. 입력 양식은 사용자로부터 데이터를 받아서 서버로 넘기는데 사용됩니다. 입력 양식에 채워진 데이터는 서버로 전달됩니다. 서버에서 받은 데이터를 처리해서 실행 결과를 사용자에게 돌려줍니다. ■ 작동 순서 입력 양식에 데이터를 채워서 서버로 보낸다. 서버는 입력 양식을 받아서 JSP와 같은 서버 스크립트로 보낸.. 2023. 2. 16.
[ HTML ] Link & table 오늘은 웹페이지에서 다른 페이지나 다른 사이트로 연결되는 하이퍼 링크인 링크와 테이블 태그에 대해서 포스팅해보겠습니다! ■ 링크(Link) HTML에서 링크(Link)는 태그로 표현합니다. 태그의 href속성은 링크를 클릭하면 연결할 페이지나 사이트로 URL주소를 명시합니다. 또한 텍스트나 단락, 이미지 등 다양한 HTML요소에 사용할 수 있습니다. HTML 링크명 1 ) 태그 기능 링크 태그 : 특정 위치로의 이동(하이퍼링크)을 지시 문서 간 이동 : href 속성에 URL을 포함한 파일명(절대 주소)을 지정 구글 사이트 href 속성에 파일 경로명(상대 주소)을 지정 샘플 HTML 문서 문서 내 이동 : 문서 내용이 많아 문서 내에서 참조가 빈번히 발생하는 경우 지정 샘플 HTML 문서 태그 속성 속.. 2023. 2. 8.
[ HTML ] 기본 태그 이번 포스팅에서는 제목, 문단, 형식, 목록 등 기본 태그들의 종류에 대해서 포스팅해보려 합니다. ■ 기본 태그 정리 1 ) HTML 기본 태그 ※HTML5 문서라면 기본적으로 포함하는 필수적인 태그입니다. 태그 의미 기능 문서 정의 태그 최상위 태그로 전테 웹 문서의 시작과ㅓ 끝을 지정. 하위에 엔티디(Entity) 코드 웹브라우저가 해석하여 처리하기 위한 특수 기호, 문자의 대표적 엔티티 코드 공백문자 : ( ) 왼쪽에 4칸의 공백이 생기며 들여쓰기처럼 효과가 생긴다. 엔티티 숫자로 쓴다면( ) 엔티티 숫자로도 쓸 수 있지만 잘 사용하지 않는다. 인용부호 : (") "인용부호" 앤퍼샌드 : (&) & ~보다 작은() greater than : (>) > 저작권 : (©) ©company 2 ) 글자 .. 2023. 2. 6.
728x90

티스토리툴바