본문 바로가기

코딩 공부

 (48)
[HTML+CSS] 07_CSS시작하기 CSS 시작하기 #01. CSS 소개 1) CSS =Cascading Style Sheets HTML 태그에 디자인을 입혀주는 기법 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄여준다. 모양 - HTML 문서 내의 글자의 종류, 크기, 색, 여백 등을 지정한다. 효과 - 글자의 정렬 방식을 결정하거나 박스의 테두리를 지정하는 등 다양한 효과를 줄 수 있다. 웹표준 - 사용자의 WebBrowser환경에 상관없이 일정한 화면을 보여줄 수 있다. #02. HTML 태그의 분류 1) Block Level 요소 (문단) 한 개의 독립된 덩어리 = 하나의 큰 그룹 블록 레벨 요소는 다른 블록 레벨 요소와 인라인 레벨 요소를 포함할 수 있다. 블록라인요소 noframes ul/ ol/ li ..
[HTML+CSS] 06_입력양식만드 입력양식 만들기 #01. 기본 입력 양식 XHTML까지 사용되던 입력 양식 태그 #02. 텍스트 입력 받기 입력 양식을 표시하는 태그 name속성과 id 속성 name 속성은 웹 프로그램과 연계되는 속성으로 한페이지 안에서 고유한 값을 명시해야 한다. id 속성은 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을 명시해야 한다. id값과 name값은 서로 동일하게 지정해도 무관하다. type 속성에 따라 화면에 표시되는 요소의 종류가 결정된다.(text, password, hidden 등) value 속성은 해당 요소에 기본적으로 작성되어 있을 값을 기술한다. 텍스트를 입력 받는 요소의 경우 maxlength 속성을 사용하여 최대 입력 가능한 글자 수를 제한할 수 있다. 요소의 제목 표시하기 ..
[HTML+CSS] 05_멀티미디어 멀티미디어 #01. 이미지의 표시 1) 이미지를 표시하기 위한 태그 이미지의 사용과 웹 접근성 이미지는 스크린 리더가 인식할 수 없는 형식이므로, 이미지를 통한 내용의 전달은 웹 접근성의 확보 불가능 alt 속성은 스크린 리더에게 이미지의 내용을 알려주기 위한 목적으로 사용하므로, 가급적 반드시 사용하는 것이 좋다. 이미지의 크기 지정하기 weight, height로 이미지의 크기를 픽셀단위로 지정한다. 크기가 주어지지 않으면 원본 크기로 표시 이미지의 경로를 명시하는 방법 절대경로: 웹 사이트상에서 해당 이미지가 위치하는 URL을 명시 상대경로: 현재 HTML파일의 위치를 기준으로 하여 상대적인 위치를 명시. 01-이미지.html 이미지의 표시 크기를 지정하지 않은 경우 이미지의 원본크기로 표시된다. ..
[HTML+CSS] 04_표만들기 표 만들기 #01. Table 태그의 기본 사용 방법 1) 표를 구성하는 태그들 2) Table 구성시 사용 가능한 기본 속성 More Actions 속성적용 가능 태그설명값 border 테두리의 두께를 설정한다. 1부터 정수 형태로 정의 width 넓이를 설정한다. 에 설정할 경우 표의 전체 넓이를 의미한다. , 에 설정할 경우 한칸의 넓이를 의미하며 각 넓이의 합은 에 정의된 넓이보다 클 수 없다. px을 의미하는 정수값.%단위의 값 height 높이를 설정한다. 에 설정할 경우 표의 전체 높이를 의미한다. , 에 설정할 경우 한 칸의 높이를 의미하며 각 열에 대한 높이의 합은 에 정의된 넓이보다 클 수 없다. px을 의미하는 정수값. align 정렬을 의미한다. 에 설정할 경우 부모 요소 안에서 표..
[HTML+CSS] 03_문장이나 단어를 강조하기 문장이나 단어를 강조하기 #01. 문장이나 단어를 강조하기 위한 HTML 태그 글자의 모양/크기/색상 표현 ... 내용 ... 굵게/기울임/밑줄 처리 HTML 설명 … 내용 … 내용을 굵게 표시한다. … 내용 … 내용을 굵게 표시한다. (bold의 약자) … 내용 … 기울임 꼴로 표시한다. (italic의 약자) … 내용 … 밑줄을 표시한다. (underline의 약자) 색상 코드값 알기 다 외우고 다닐수 없으므로 구글에 “색상코드표” 키워드를 검색해서 본다 color picker 구글에 검색후 원하는 색상의 Hex값을 가져다 쓴다. 스타일을 적용시키기 위한 영역 지정하기 태그 자체로는 어떠한 기능도 없다 CSS 스타일을 적용하여, 포함하고 있는 내용을 시각적으로 꾸미기 위한 영역을 지정하는 용도로 사용..
[HTML+CSS] 02_단락의표현 단락의 표현 #01. XHTML에서의 단락 관련 HTML 태그들 1) 단락을 나누기 위한 HTML 태그의 종류 XHTML에서는 단락을 통하여 문서의 구조를 표현하고, 이 태그들이 CSS와 결합하여 페이지의 레이아웃을 구성하게 된다. 태그 설명 div division의 약자로, "영역"을 의미 h1~h6 제목을 의미한다. 1수준부터 6수준까지있다. ol 순서 있는 목록을 의미한다. 이태그안에는 태그가 포함될 수 있으며, 포함된 항목은 순서대로 일련번호가 포함된 상태로 출력된다. ul 순서 없는 목록을 의미한다. 이 태그 안에는 태그가 포함될 수 있으며, 포함된 항목은 순서대로 도형표시가 포함된 상태로 출력된다. 01-문서의제목.html H1 수준의 제목 H2 수준의 제목 H3 수준의 제목 H4 수준의 제목..
[HTML+CSS] 01_화면구현 시작하기 화면 구현 시작하기 #01. 화면 구현 작업 단계 일반적인 화면 구현의 작업 단계 #02. 요구사항 확인 MindMap 구조를 활용한 웹 페이지의 요구사항 확인 회사마다 요구사항을 도출하기 위한 양식이 다를 수는 있다. XMind8 -> 요구사항 확인을 위한 MindMao 도구 https://www.xmind.net/download/xmind8 엑셀을 활용한 웹 페이지의 요구사항 정의서 #03. UI 설계 1) UI(User Interface)의 정의 사용자가 하드웨어나 시스템에 연결되는 과정에서 사용자의 편리성과 가독성을 높여 주기 위한 것이다. CLI (Comman Line Interface) 명령어 라인 인터페이스 사용자와 시스템이 상호 작용을 하는 방식으로 명령과 출력이 텍스트 형태로 표현된다. ..
[HTML+CSS] 00_웹페이지 기본구조 웹 페이지 기본 구조 #01. HTML이란? 1) HTML = Hyper Text + Markup + Language 웹 브라우저를 통해 사용자에게 보여질 문서를 작성하기 위한 마크업 언어. HTML은 본문을 위한 구조적 의미를 나타내는 것 뿐만 아니라 링크, 인용과 그 밖에 항목으로 구조적 문서를 만들 수 있는 방법을 제공 이미지와 객체를 내장하고 대화형 양식을 생성한는 데 사용가능. 2) Markup 프로그램 코드 상에서 내용을 강조하기 위한 처리 기법. 강조할 내용을 태그(TAG)라는 단위로 감싸고, 태그에는 단어를 강조하는 목적을 기술한다. 3) HTML 태그 HTML에서는 각 상황에 따른 태그를 미리 약속해 놓고, 특정 태그에 의해 감싸진 내용에 웹 브라우저가 그래픽을 적용하여 화면에 표현하도록..

티스토리툴바