본문 바로가기
  • Welcome.

:: HTML 🚩10

#09-1 DIV 공간 분할 태그 DIV(공간분할태그): 레이아웃을 나타내기 위해 공간분할 표현 먼저, 다음과 같이 를 작성해보겠다. block: 박스와 같이 쌓이면서 나타나는 성격 / 화면 전체를 사용하는 태그 쌓이면서 표현됨을 알 수 있다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 에 을 작성하고 div선택자를 통해 배경색을 정하고 행간을 50px롤 정하였다. background-color, line-height ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 이번엔 일단 div태그를 주석처리하고 span태그를 작성해보겠다. inline: 글자와 같이 옆으로 나열되며 나타나는 성격 / 내용의 폭값, 화면의 일부를 차지하는 태그 / width, height, margin-top,.. 2021. 2. 15.
#08 -2 CSS의 이해 - 속성의 종류 이번엔 CSS 에서 속성의 종류에 대해 알아보겠다. 먼저 을 작성하기 위해 필요한 이미지 몇개를 img 폴더에 넣어두고 다음 그림처럼 이 html문서와 같은 위치인 바탕화면에 위치해두겠다. css.html과 img폴더. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 먼저, 에 다음과 같은 내용을 작성하고, 에 을 작성하고 *선택자를 통해 모든 요소에 대해 padding과 margin값을 0으로하여 여백을 없애겠다. 두문장 사이에 여백이 사라졌다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ body선택자를 통해 에 해당하는 부분에 대해 background-color: darksalmon; color: brown; 배경색을 darksalmon 색,.. 2021. 2. 15.
#08 CSS의 이해 css에 대해서 알아보겠다. CSS: Cascading Style Sheet - html 문서의 디자인 요소를 담당하는 부분 (디자인 및 배치의 역할) ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 먼저, css의 기술방식부터 알아보자. css 기술방식은 내부 css와 외부css로 나눌 수 있다. 내부css: 속성 스타일(inline style sheet) & 태그 기술 방식(Internal style sheet) 1. 속성 스타일 (inline style sheet) ~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~ 2. 태그 기술 방식(Internal style sheet) ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ.. 2021. 2. 15.
#07 HTML 태그의 이해 - 04. 하이퍼텍스트 링크 하이퍼텍스트 링크: 문서를 연결하는 태그 - 웹페이지로의 이동 혹은 웹페이지의 특정한 위치로 이동할 때 사용 기본 꼴 : 특징: - 글자처럼 옆으로 나열되는 성격 > (inline) - 자동으로 스타일이 생성 > ( 밑줄 / 글자색) - 링크연결시 마우스 올리면 손모양 커서로 변경 - 링크 클릭시 화면 내 전환. 링크연결 - # 은 임시링크로 쓴다. 가장 유명한 네이버를 예시로 들어보겠다. 다음처럼 www.naver.com 을 입력하여 하이퍼링크를 만들 수 있다. 네이버로 이동하기 를 클릭했는데 아래그림처럼 페이지가 뜨지 않는다!! 왜일까? 그 이유는 인터넷주소 앞에 http:// 를 입력하지 않았기 때문이다. **인터넷 페이지를 연결시킬 때에는 반드시 인터넷주소 앞에 http:// 를 입력해야 한다. .. 2021. 2. 15.
#06 HTML 태그의 이해 - 3. 이미지 태그 - 이미지 저장할 때 반드시 웹문서 저장법과 동일하게 공백없이 영문으로 저장. - 웹문서를 작업하는 폴더에 불어오고자 하는 이미지 파일이 위치 - 너무 크거나 저화질의 작은 이미지는 최소화하기 - 글자와 같이 옆으로 나열되는 성격을 가지고 있으므로 단락 구분시 태그 부여 - 단독태그이다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡalt : 주석 (한글로도 작성 가능) width: 이미지의 가로폭 height: 이미지의 높이 **고정비는 수정하지 않는 것이 좋다 (css를 통해 수정 가능) ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 를 문서에선 세로로 써도 웹문서에서는 가로로 표현된다. 따라서 을 통.. 2021. 2. 15.
#05 HTML 태그의 이해 -2. table 태그 ======================================================= Keyword: table 옵션 cellpadding cellspacing border width td 옵션 width height width ============================================================================ 테이블 태그 : 표를 만들 때 사용한다. - 웹초기 테이블 레이아웃 구조로 표현 - 주로 표를 만들 때 사용 ** - 자동 중간 정렬 / 굵게 표현 ** - 기본적으로 테이블 내용의 세로 정렬은 중간 태그 설명 표의 시작과 끝, 테이블의 전체 줄의 시작과 끝 (행을 만드는 태그) 칸의 시작과 끝 (열을 만드는 태그) 테이블의 헤더.. 2021. 2. 15.
#04 HTML 태그의 이해 -1. Text 관련 태그 텍스트와 관련된 태그에 대해서 먼저 얘기 해보겠다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ , , , , , , , , , , , , , , , , , , , , ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ ~ : 제목태그, 제목을 나타내고 구분짓는 태그 h1부터 h6 까지 글자의 크기가 다르게 표현된다. 단락이 구분되어진다. ~ ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ : 단락 태그, 본문을 나타내기 위한 태그. 단락이 구분되지만 기본형태로 표현된다. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ.. 2021. 2. 15.
#03 코딩 편집 프로그램 [브라켓 사용법] 코딩 편집 프로그램: HTML editor & source code editor 인터넷 웹페이지를 작성하기 위한 편집도구. 컴퓨터 프로그램의 소스코드를 편집하기 위한 프로그램. 브라켓: Adobe 에서 만든 오픈소스 에디터로서, html, csc 코딩을 하는데 최적화된 도구 - 마크업을 수정하여 실시간으로 확인 가능 - 이미지 파일을 프로그램 내에서 확인 가능 - 오픈소스 - 확장시설 설치를 통해 다양한 기능 추가가 가능 - 맥 os 에서도 프로그램 설치가 용이 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 크라켓 실행 화면 Ctrl + S를 통해 저장할 수 있다. 그러나, 메모장에 입력한 경우와 달리 이미 HTML문서화 되어있으므로 제목만 수정해줄 수 도 있다. 이때, 직접.. 2021. 2. 15.
#02 FTP 프로그램 사용 FTP: File Transfer Protocol 서버와 클라이언트 사이의 파일을 전송하기 위한 프로토콜. 즉, 컴퓨터에서 서버로 문서를 업로드하는 데 사용되는 프로토콜. 웹서버 개설: FTP로 지정된 컴퓨터에 사용자가 접속하기 위해서는 고유IP가 필요하다. >>> 무료 웹서버를 개발해서 고유의 IP주소 및 계정을 만들 수 있다. FTP 설정시 주의 부분: FTP 아이디 = 사용자 FTP 비밀번호 = 비밀번호 도메인 = 호스트 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 파일질라 설치하기: 오픈소스 크로스 플랫폼의 무료 소프트웨어이 FTP 소프트웨어로 파일질라 클라이언트와 파일질라 서버로 제공된다. 파일질라 설치 후 : 파일 >사이트 관리자 >도메인, ID, 비번 입력 하면.. 2021. 2. 15.
#01 html 문서의 이해 html: HyperText Markup Language의 약자로서 웹사이트를 구성하기 위한 마크업 언어. 즉, 웹 문서로 여러 태그로 구성되어 있다. 웹 표준: 누구나, 어떤환경에서나 웹 표준에 준수한 코딩. W3C가 권고한 표준안에 따라 브라우저의 종류 혹은 버전과 구현되는 기기에 따라 모든 기술을 동일하게 구현하기 위한 규칙성을 이야기함. 태그: HTML을 이루는 기본 구성 단위 특정한 성격을 가진 명령어로 문서의 구조의 부분을 나타내며, 꺽쇠 괄호 로 감싸서 구분한다. ex)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ *그 외 언어 및 이름 생성시 주의 사항: 1. _(언더바) 와 -(하이픈) 2. 소문자 대문자 구분 3. 띄어쓰기 불가 4. 한.. 2021. 2. 15.
728x90

티스토리툴바