본문 바로가기

분류 전체보기

 (102)
[CSS] Chapter 05. font의 속성 1. 크기: font-size 폰트의 크기를 지정하는 방법으로 px 혹은 pt 단위로 지정이 가능하지만, 최근에 사용자의 출력 장치가 다양하여 비율 대비 문자 크기 지정을 많이 사용한다. ◍ em: 대문자 M의 크기가 1em이다. ◍ rem: 페이지의 처음 문자 크기를 1rem이라고 한다. ◍ ex: 소문자 x의 크기를 1ex라고 한다. ◍ px: 모니터의 화소 단위를 기준으로 출력되며, 모니터 1화소가 1px이다. ◍ pt: 워드나 일부 문서의 글자 크기를 말한다. 타문서와 통일 규격을 위해 사용된다. 간략하게 지정하는 font-size는 아래의 정보를 참고하여 지정할 수 있다. ◍ xx-small > x-small > small > medium > large > x-large > xx-large 2...
[CSS] Chapter 04. 그룹을 지정하는 Tag 1. span 태그는 여러 태그들을 묶어주는 분류 태그로, inline element 만큼의 공간을 차지하는 특징을 가진다. 이는 자신의 content만큼만 공간을 할당한다는 것으로, html에서 데이터(태그)를 분류할 때 매우 중요한 역할을 한다. 분배가 목적인 태그이기 때문에 특별한 기능이나 디자인이 없는 것이 특징이다. 2. division의 약어로 div 태그 자체는 특정한 기능과 디자인은 없지만, Mark up 과정에서 데이트를 분류하고 분배하는 역할을 한다. div 태그는 block level element만큼 공간을 할당하는데, 해당 코드의 ‘행 전체’의 공간을 차지한다. html을 통해 화면을 구성하고 구현할 때 ‘가장 많이 사용’하는 태그이다. span 태그와 마찬가지로 특별한 시각적 효..
[CSS] Chapter 03. CSS Selector (선택자) 1. 개요 html은 html5의 표준에 따라 데이터를 마크업하는 프로그래밍 언어이다. html이 발전하면서 브라우저의 연산을 빠르게하고, 프로그래머나 회사 사이의 기법 발전을 통일하기 위해 표준을 정하는 움직임이 발생했다. 웹 표준은 이제 더이상 무시할 수 있는 항목이 아니다. 때문에 프로그래머는 이 표준에 따라 데이터의 값이나 형식을 지정하고, 지정한 형식에 따라 구조를 구성하여 프로그래밍을 진행한다. 웹 표준은 생산성이 증가한다는 장점을 가지지만 개인의 창의성을 저하하는 결과를 가져온다. 마크업은 결국 데이터의 포함관계를 규정하는 것인데, 이러한 규정에 따라 동일한 태그가 다수 사용된다면, 특별히 지정하고 싶은 개발자의 규칙 형성이 불가능하다. 이러한 특성에 따라 특정 태그나 데이터를 골라서 ‘추출..
[CSS] Chapter 02. CSS Style Precedence 1. CSS 스타일의 우선 순위의 개념 데이터 구현에 있어서 데이터의 중요도를 설정하고 구현하는 것은 html을 통한 웹 페이지 제작에서 매우 중요한 의의를 가진다. 데이터의 중요도에 따라 해당 데이터의 구현 방식이나 범위가 변화하고, 자신이 원하는 기능을 구현하는 것에 영향을 미치기 때문이다. 2. Web 브라우저의 데이터 우선 순위 사용자 스타일 시트, 권한: 중요 (블루 라이트 등) 제작자 스타일 시트, 권한: 중요 제작자 스타일 시트, 권한: 일반 사용자 스타일 시트, 권한: 일반 웹 브라우저 기본 스타일 시트 웹 브라우저에서 모양이 구현될 때, 권한에 따라 충돌 오류를 해결하여 구현된다. 1 항목이 가장 높은 권한을 가지고 있으며 우선 구현된다. 즉, 1과 2가 충돌한다면 충돌하는 영역에서 화면..
[CSS] Chapter 01. CSS의 개요 1. CSS란 무엇인가? Cascading Style Sheet 의 약자이며, 종속 연결되는 스타일 지정 문서를 말한다. HTML 태그의 모양을 변경하는 통합 문서체계를 말하며, 구조화 된 내용을 꾸미는 역할을 한다. 2. 브라우저의 기본 스타일 브라우저의 종류에 따라 기본 폰트의 구현이나 스타일이 결정된다. 때문에 개발자는 주로 사용하는 브라우저에 대해서 호환성을 고려하여 개발을 진행한다. Chrome, Microsoft Edge, Safari 등 Major한 브라우저로 개발을 진행하는 것이 용이하다. 3. html에서의 스타일 지정: 명령어의 마무리 지정 [ ; ] 디자인 요소는 복합적으로 이루어져 있다. 때문에 style을 복수로 지정하는 경우가 발생하는데 이런 경우, style 간의 혼동을 방지하..
[HTML] Chapter 09. 데이터 전송 1. 개요: 사용자 데이터를 취하는 방식 ◍ Get 방식: form을 통해 지정한 양식으로 데이터를 추출하고 jsp를 거쳐 Database에 저장한다. ◍ Post 방식: Server의 post 변수에 데이터를 저장한다. 도메인 위치에 정보가 보이지 않아 보안에 이점이 있으나 해당 방식을 사용하려면 Server가 필요하다. 1.1. Get 방식과 Post 방식의 비교 1.2. 데이터 전송 방식의 차이 2. 데이터 입력과 전송을 위한 포함: 폼은 사용자가 입력한 데이터를 전송하기 위해 사용하는 태그로, 서버에 정보를 전달하고 저장하는 기능을 한다. 또한 해당 정보를 기반으로 서버에서 해당하는 페이지를 찾고, 다른 웹 페이지를 보여준다. 기본적으로 input과 select를 통해 데이터를 입력받을 수 있다...
[HTML] Chapter 08. 사용자의 데이터 입력 1. 입력 값에 대해서 웹 페이지는 정보를 상호 교환하며 화면을 표시하는 기능이다. 검색 부터 로그인까지 웹의 기능의 구현에는 사용자가 입력해야할 정보가 필요하다. 웹 페이지의 기능과 다양한 플랫폼은 사용자로부터 데이터를 받고, 해당 데이터를 통해 사용자가 원하는 정보를 처리하는 일련의 과정을 가진다. div가 화면 구현에 필요한 중요한 기능이라면, 입력 값을 받는 것은 기능 구현에 매우 중요한 기능이라고 할 수 있다. 2. 사용자가 값을 입력하는 기능: 태그는 사용자가 웹 페이지에 정보를 전달할 때 사용하는 태그이다. 기본적으로 하얀 박스로 데이터 입력이 가능하도록 하는데 type에 따라 다양한 모습으로 구현이 가능하다. 현재 데이터 입력 및 데이터 베이스에 대한 지식이 없기 때문에 입력받은 정보를 활..
[HTML] Chapter 07. 문서에서 다른 페이지로 이동 1. 문서를 이동시키는 Tag: a 웹 페이지는 상호작용을 통해 페이지를 이동하고 정보를 확인할 수 있는 장점이 있다. 해당 태그의 기본형은 로 이동로 연결한 링크의 이름을 지정할 수 있다. 기본적으로 연결할 html이 지정해야하므로 를 기본형으로 이해하는 것이 좋다. href (html reference의 약자)에 연결할 html 파일을 지정하여 html 간의 이동을 지정할 수 있다. 해당 경로 지정은 src와 동일한 규칙으로 적용할 수 있지만, alt 및 width, height는 적용할 수 없다. 또한 해당 에 img 태그를 삽입하여 이미지 클릭시에 이동하도록 지정할 수 있다. 2 새창에서 열기: target=”” 태그는 다른 html 로 이동시켜주는 역할을 한다. 탭 전환없이 이동하고자 한다면 해..

티스토리툴바