Engineering/Frontend

Engineering/Frontend

[HTML] Table 셀 병합

💡셀병합가로로 인접한 셀끼리 합치면 가로 셀병합, 세로로 인접한 셀끼리 합치면 세로 셀병합이다. 원본 테이블 1. 가로 셀병합가로 셀병합을 할 때에는 colspan 속성을 사용한다.colspan 속성을 2로 지정하면 다른 것들보다 2개만큼의 컬럼을 확보한다.가로 셀병합 1 2 3 4 가로 셀병합 1 2 --> 3 4 그리고 2번 셀을 삭제해주면 1번 셀만이 남아 가로 셀병합이 된다. 2. 세로 셀병합세로 셀병합을 할 때에는 rowspan 속성을 사용한다.세로 셀병합 1 2 3 4 ..

Engineering/Frontend

[HTML] Table (표)

💡Table업무용 프로그램들은 표로 시작해서 표로 끝이 난다. 다른 태그에 비해 표를 구성하는 태그의 수가 많은 편이다. 💡표 만드는 규칙2 x 2 표 생성1. 가장 바깥쪽의 큰 상자를 1개 만든다.2. 가로가 똑같은 상자를 2 개 만들어서 큰 상자에 넣는다. (행의 역할)3. 작은 상자를 4개 만들어서 가로가 똑같은 상자에 2개씩 넣는다. (셀의 역할) 1. 큰 상자로서 전체 컨테이너 역할을 한다. 2. table row중간 상자로서 행 역할을 한다. 3. table data작은 상자로서 셀 역할을 한다.데이터를 담는 역할을 한다. 4. table header작은 상자로서 제목을 출력하는 셀 역할을 한다. 표 생성2행 2열 테이블 1 2 ..

Engineering/Frontend

[HTML] 인라인 태그와 블럭 태그

📌인라인 태그와 블럭 태그모든 태그는 인라인 태그와 블럭 태그 두 분류 중 하나에 속한다.예로 들어 문단 태그와 제목 태그는 블럭 태그이며, 링크 태그와 이미지 태그는 인라인 태그이다.각 태그가 어디에 속해 있는지를 반드시 알고 있어야 한다.인라인 태그와 블럭 태그에 속하는 것에 따라서 랜더링의 결과가 서로 다르기 때문이다. 랜더링 (Rendering)HTML에서의 랜더링은 태그를 화면에 출력하는 작업을 의미한다. 💡인라인 태그인라인 태그(Inline Tag)는 자신의 내용물과 주변 태그의 내용물을 같은 라인에 출력을 한다. 같은 줄에 출력을 한다고 해서 Inline이다.PCDATA(텍스트)는 인라인 태그에 속하는 성질을 가진다. 태그는 인라인 태그이다. 태그가 인라인 요소들을 개행하는 역할을 한다..

Engineering/Frontend

[HTML] 이미지 삽입 (Image)

💡이미지 삽입이미지를 삽입할 때 태그를 사용한다. 태그는 단독 태그이다. 속성1. img.srcsrc는 source의 약자로, 이미지의 경로를 나타낸다.경로는 절대 경로와 상대 경로 모두 사용할 수 있다. 2. img.alt대체 텍스트(alternate text)로서 이미지를 대신해서 출력할 문자열이다.이미지가 깨지는 경우 alt에 작성한 내용이 출력된다.alt는 필수 속성이지만, 작성하지 않아도 이미지가 출력되기는 한다.공공기관 프로젝트에서는 alt 속성을 음성으로 읽어주는 경우가 있으므로 alt 작성을 반드시 작성하도록 한다. 3. img.width4. img.height사진의 크기를 알고 싶을 때 개발자 도구를 활용할 수 있다.해당 이미지의 크기는 width 492 x height 640이다..

Engineering/Frontend

[HTML] URL(URI): 프로토콜, 도메인, 웹 서버 포트번호

💡URL(URI)http://localhost:8090/client/html/ex12_url.htmlhttps://www.naver.com/https://www.google.co.kr/?hl=koUniform Resource IdentifierUniform Resource LocatorURL(URI)는 웹 상의 자원(페이지, 이미지, 영상, 프로그램 등)을 구분하기 위한 고유 주소값이다. URL과 URI의 관계URI가 정의하는 게 더 크고, 그 안에 부분집합으로 존재하던 게 URL로, URI가 상위 개념이다.하지만 URL을 제외한 URI의 기능이 거의 쓸모가 없어졌기 때문에 현재는 URL과 URI를 거의 동급으로 취급한다. 1. 프로토콜http://https://프로토콜(Hyper Text Transf..

Engineering/Frontend

[HTML] Link (링크)

💡Link 태그는 anchor(닻)의 약자로, Link 태그라고도 부른다. 링크 속성a.hrefa.targeta.href는 클릭하면 이동할 URL을 넣는 속성이다. 이때 href는 reference a hyperlink의 약자이다.a.target은 열거형으로 _self | _black | _parent | _top | 프레임명을 사용한다. a.href 속성내부 링크 외부 링크내부 링크는 같은 사이트 내의 이동을 의미한다.외부 링크는 다른 사이트의 이동을 의미한다.링크링크입니다.내부 링크링크입니다.외부 링크링크입니다.링크는 파란색 또는 보라색으로 색이 다르며, 밑줄이 생기는 게 일반적이다.외부 링크를 이용할 때에는 프로토콜(https://)을 반드시 붙여 주어야 한다. a.target 속성_blanka...

Engineering/Frontend

[HTML] List (목록)

💡List1. 순서가 있는 목록2. 순서가 없는 목록3. 용어 정의 목록 1. 순서가 있는 목록, 태그를 조합하여 사용한다.은 Ordered List, 는 List Item의 약자이다.오늘의 할일 수업 복습하기 책상 정리하기 우산 말리기 태그는 순서가 있는 목록을 만든다.숫자는 태그가 자동으로 넘버링해서 붙여지게 된다. 5가지 모양오늘의 할일 수업 복습하기 책상 정리하기 우산 말리기 수업 복습하기 책상 정리하기 우산 말리기 수업 복습하기 책상 정리하기 우산 말리기 수업 복습하기 책상 정리하기 우산 말리기 수업 복습하기 책상 정리하기 우산 말리기1, a, A, i, I의 5가지 모양으로 넘버링을 할 수 있다...

Engineering/Frontend

[HTML] Style 태그: 물리적인 모양을 지정하는 태그, 의미를 중시하는 태그

💡Style 태그스타일 태그 [HTML] HTML 언어 구성 요소💡HTML이란? HTML(Hyper Text Markup Languate)은 하이퍼 텍스트 마크업 언어의 약자이다. HTML은 프로그래밍 언어가 아니며, 무언가를 표현하는 기능을 가졌기 때문에 프레젠테이션 언어라고 부른다. Hyperisaac-christian.tistory.com앞서 HTML 언어는 골격 구성, 데이터 표현, 서식 기능이 있다고 했다. 서식 기능안녕하세요. 안녕하세요.위와 같이 font에는 여러 가지 속성을 넣을 수 있다. size는 1부터 7까지의 숫자를 넣을 수 있다. 1이 가장 작고 7이 가장 크다. 이런 게 바로 HTML의 서식 기능이다. 그런데 HTML에서는 서식 기능을 절대 사용하지 않는다!글자 크기와 색상 ..

Isaac S. Lee
'Engineering/Frontend' 카테고리의 글 목록 (13 Page)