🔻HTML 문서에 CSS를 적용하는 방법🔻 1. 인라인 스타일 시트, Inline Style Sheet 태그안에 스타일 적용 장점 : 가독성이 높다. 단점 : 재사용이 불가능하다. Vs Code 설치하기 2. 내부 스타일 시트, Embeded Style Sheet 태그내에 서식을 명시한다. 문서 내의 여러태그의 서식을 일괄 적용할 수 있다. 장점 : 재사용이 가능하다. 단점 : 가독성이 낮다. See the Pen Untitled by 허수경 | 정보융합전공 | 한양대(서울) (@nscilehk-the-scripter) on CodePen. ❗3. 외부 스타일 시트, External Style Sheet❗ *.css 파일에 서식을 명시한다. 여러 HTML 파일에 스타일 적용이 가능하다. 장점 : 재사용..
🔻CSS, Cascading Style Sheets🔻 스타일 시트로 디자인을 담당한다. HTML 페이지의 서식을 만드는 언어이다. 독립 실행이 안되어 반드시 HTML 문서와 같이 사용해야 한다. HTML 서식 기능에서 확장되어 CSS 서식 기능이 만들어졌다. 🔻CSS 주요 역할🔻 1. 스타일링(웹디자인) HTML 요소(태그)들에게 스타일을 적용한다. 2. 페이지 레이아웃 요소들의 배치와 크기를 조절한다. 3. 반응형 웹 디바이스 크기에 맞춰 적절한 레이아웃과 스타일을 제공한다. 4. 웹 접근성 향상 시각 장애인을 위한 스크린리더 작업을 제공한다. 🔻CSS 중요성🔻 1. 시각적 표현 훨씬 더 완성도 높은 화면을 구현 할 수 있다. 2. 생산성 및 유지보수 용이성 향상 HTML와 서식을 분리시켜 작업함으로써..
생산성을 높이는 기능 중인 세로 편집 기능의 단축키 같은 열 위치에서 세로편집하기 ctrl + alt + 방향키 원하는 위치에만 세로편집하기 왼쪽 alt 누르고 원하는 위치 클릭
https://www.acmicpc.net/problem/29807 29807번: 학번을 찾아줘! 첫째 줄에 김한양이 응시한 과목 수를 나타내는 정수 $T (1 \leq T \leq 5)$가 주어진다. 둘째 줄에 각 과목의 표준점수를 나타내는 $T$개의 정수가 공백으로 구분되어 주어진다. 점수는 국어, 수학, 영 www.acmicpc.net ❓문제 간단한 문제이지만 자꾸 런타임 에러가 난다. import java.io.BufferedReader; import java.io.InputStreamReader; import java.util.StringTokenizer; public class Main { public static void main(String[] args) throws Exception { ..
폼, Form 입력 양식, 입력 컨트롤을 담당한다. 클라이언트(사용자)로부터 입력장치(키보드, 마우스,, )을 통해서 데이터를 입력받는 역할을 한다. 입력데이터는 서버로 전송되어 업무에 활용되거나 데이터베이스에 저장된다. 🔻 태그🔻 모든 입력 컨트롤을 감싸는 컨테이너 스스로는 랜더링 결과가 없다. 입력한 값을 서버로 전송하는 역할을 한다.(***) 🔻 속성🔻 1. form.method 데이터를 전송하는 방식 1. POST 데이터를 상자 안에 담아서 전송하는 방식 전송하는 데이터의 최대 길이의 제한이 없다. 2. GET 데이터를 송장에 붙여서 전송하는 방식이다. 주소창 뒤에 전송되는 데이터가 노출되어 전달된다. 보안 상 좋지않다. 전송하는 데이터의 최대 길이가 256자(8000 바이트)로 제한되어 있다. ..
표, table 🔻표 생성 순서 이해하기🔻 [2행 2열 상자 만드는 순서] 1. 큰 틀 하나를 만든다. 2. 가로 길이가 전체 길이와 같고 세로길이는 전체 길이의 1/2인 틀 2개를 만든다. 3. 2에서 만든 틀의 가로길이 1/2, 세로길이는 전체 길이의 1/2인 틀 4개를 만든다. 🔻구성요소🔻 1. 전체 컨테이너 2. table row의 약자 행 역할 3. table data의 약자 셀 역할 4. table header의 약자 표제목을 출력하는 전용 셀 🔻테이블 생성🔻 2행2열 테이블 1 2 3 4 🔻테이블의 크기 조절🔻 width, height 속성으로 조절한다. 2행2열 테이블 1 2 3 4 Q. 전체 너비가 200일 때, 한 셀의 너비를 100으로 설정한다면 사이즈가 반반으로 나눠질까? A. 그렇..
인라인 태그 vs 블럭 태그 모든 태그는 위의 두 분류 중 하나에 속한다. 랜더링의 결과가 다르다. 반드시, 인라인 태그인지 블럭 태그인지 구분하여 사용해야한다. 랜더링(Rendering) 이란 태그를 화면에 출력하는 작업 h1 태그에 속하면 큰 글씨와 굵은 폰트로 출력하는 것 🔻인라인 태그, Inline Tag🔻 자신의 내용물과 주변 태그의 내용물을 같은 라인에 출력한다. 자바의 print()와 같다. PCDATA(텍스트)도 인라인 태그에 속하는 성질을 가진다. 내용물의 크기가 태그의 영역이다.(***) 네이버 구글 다음 문자열 🔻블럭 태그, Block Tag🔻 자신의 내용물과 주변 태그의 내용물을 다른 라인에 출력한다. 자바의 println()과 같다. 내용물의 크기와 상관없이 자신이 속한 라인을 독..
🔻이미지, Image🔻 단독태그 *저작권 없는 이미지 공개 사이트 https://pixabay.com/ 🔻img 속성🔻 1. img.src source의 약자 이미지 파일 url을 넣는다. 이미지 2. img.alt alternate text의 약자 이미지가 에러나서 출력이 안될경우, 이미지를 대신해서 출력할 문자열을 의미한다. 스크린 리더에서 사진을 읽는 역할로 사용된다. 이미지 3. img.width 이미지 너비 설정 ⁉웹 이미지의 크기를 확인하는 방법 이미지 우클릭 후 검사 클릭 오른쪽 검사 창에 사이즈가 나타난다. 4. img.height 이미지 높이 설정 이미지 크기는 파일 크기와 상관이 없다. 5. img.border 테두리 설정 🔻html 속성🔻 1. 필수 속성, Required 반드시 작성..
URL(=URI) URI : Uniform Resource Identifier URL : Uniform Resource Locator 웹상의 자원(페이지, 이미지, 영상 등등)을 구분하기 위한 고유 주소 값 ex) http://localhost:8090/client/html/ex12_url.html https://www.naver.com:443/ 구조 1. https://, http:// 프로토콜(=통신 규약) Hyper Text Transfer Protocol : 웹 페이지를 주고 받는 통신 2. localhost(127.0.0.1) www.naver.com 도메인 : Server IP Address 변환 접속 서버측 호스트(컴퓨터)의 주소 3. :8090, :80, :443 웹서버 포트번호 아파치 톰..
🔻링크, Link🔻 , anchor(닻), link href가 있으면 링크라고 부른다. - 링크 속성 a.href : 클릭하면 이동할 URL . reference a hyperlink. a.target : 열거형. _self / _blank / _parent / _top _self 내부 링크용으로 사용한다. 현재 창에서 페이지가 이동된다. _blank 외부 링크용으로 사용한다. 새 창에서 페이지가 열린다. 링크 내부 링크(같은 사이트내의 이동) 10번 예제 외부 링크 네이버로 이동합니다. 구글로 이동합니다. - 앵커 href가 없으면 앵커라고 부른다. 문서 내에서 다른 위치로 이동하는 링크를 생성하는 요소이다. 스크롤 이동이 된다. 다른 링크와 구분하기 위해 #를 붙인다. 이동할 위치의 태그에 name ..
