![]()
선택자 CSS를 적용할 위치의 HTML 요소 전체 선택자 * { margin: 0; padding: 0; } HTML 문서 내부의 모든 요소에 같은 CSS 속성을 적용 보통 margin이나 padding 등 브라우저 기본 스타일들을 초기화 할 때 사용 하지만 문서 내의 모든 요소를 읽어야 하기에 페이지 로딩 속도가 느려질 수 있으므로 최소한으로 사용하는 것이 좋음 #wrapper * { border: 1px solid #000; } 전체 선택자는 위의 경우처럼 자식 선택자에도 사용 가능 태그 선택자 태그 선택자는 HTML 요소를 직접 지칭 해당 선택자와 같은 이름을 가진 태그 전부에 속성 적용 태그이름 { 속성1: 속성값1; 속성2: 속성값2; } div { background-color: #000; c..
![]()
CSS란? 사용자에게 문서를 표시하는 방법을 지정하는 언어 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어 웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 편리 HTML - 문장 구조 CSS - 문장 디자인 CSS 사용 방법 인라인 스타일 HTML 요소 안에서 Style 속성 이용 해당 요소에만 스타일 적용 내부스타일 HTML 문서의 태그 내에 태그를 사용하여 스타일을 지정 해당 HTML 문서에만 스타일을 적용 외부스타일 별도의 CSS 파일을 분리하여 HTML 문서에 연결 웹 사이트..
![]()
브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더 input input 요소를 사용하여 사용자로부터 입력을 받음 input 요소 텍스트 입력(text) 한 줄의 텍스트 입력 받음 검색할 내용을 입력하세요 : 비밀번호 입력(password) 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시 사용자 : 비밀번호 : 라디오 버튼(radio) 사용자로부터 여러 개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있음 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성 동일 HTML CSS JAVA C++ 체크박스(checkbox) 용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있음 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 in..
![]()
From form 요소를 사용하여 사용자로부터 입력 받고 사용자가 입력한 데이터를 서버로 전송 텍스트 필드에 글자를 입력, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달 action 속성 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시 method 속성 입력받은 데이터를 서버에 전달할 방식을 명시 GET 방식 주소에 데이터(data)를 추가하여 전달 데이터가 주소 입력창에 그대로 나타남 전송할 수 있는 데이터의 크기 제한적 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용 POST 방식 데이터(da..
![]()
HTML 요소의 display 속성값 블록 새로운 라인에서 시작 해당 라인의 모든 너비를 차지 다른 HTML 요소들을 하나로 묶는 블록 요소 주로 여러 요소들의 스타일을 한 번에 적용 가상의 레이아웃을 설계 주로 CSS와 연동하여 쓰임 인라인 새로운 라인에서 시작하지 않음 해당 HTML 요소의 내용만큼 너비 차지 텍스트(text)의 특정 부분을 묶는 인라인 요소 텍스트의 특정 부분에 따로 스타일을 적용 CSS와 함께 쓰임 iframe 요소 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입 iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정 iframe 요소의 테두리 변경 기본값 - 검정색 테두리 iframe 요소의 페이지 변경하기 PHP 수업 확인하러 가기 => 태그의 t..
![]()
표 생성 , 등의 태그와 함께 작성 레이아웃 구성시 와 CSS 사용 태그 표의 행 태그 각 열의 제목, 자동으로 굵은 글씨&가운데 정렬 태그 표의 열, 태그 하위 colspan 속성 테이블의 열 합치기 rowspan 속성 테이블의 행 합치기 태그 주석, 테이블 상단에 제목이나 짧은 설명 CSS의 border 속성 border 속성 값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리 두 줄로 표현되는 테두리를 한 줄로 설정 -> border-collapse 속성값을 collapse로 설정 태그 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용 표의 제목 영역, 하위, 상위 반드시 하나 이상의 요소를 포함 태그 표의 본문 영역, 와 같은 위치 태그 표의 아래 영역, 와 같은..
![]()
목록을 만드는 태그 단독으로 쓰이지 않으며 혹은 태그 내부에 들어감 단순히 리스트 나열 뿐만 아니라 메뉴등을 만들때도 사용 이중 리스트 가능 사과 멜론 바나나 사과 멜론 바나나 순서가 있는 리스트 포함되는 각각의 리스트 요소는 태그로 시작 모든 목록 항목은 숫자로 표시 CSS의 list-style-type 속성 - decimal : 숫자 (기본설정) - upper-alpha : 영문 대문자 - lower-alpha : 영문 소문자 - lower-roman : 로마 숫자 소문자 - upper-roman : 로마 숫자 대문자 호박 - 박과의 한해살이 덩굴성 채소 상추 - 국화과의 한해살이 또는 두해살이풀 정의 리스트 태그 : 용어의 이름 태그 : 해당 용어의 정의
![]()
문자열 출력하기 문제 설명 문자열 str이 주어질 때, str을 출력하는 코드를 작성해 보세요. 제한사항 1 ≤ str의 길이 ≤ 1,000,000 str에는 공백이 없으며, 첫째 줄에 한 줄로만 주어집니다. 입출력 예 입력 #1 HelloWorld! 출력 #1 HelloWorld! 코드 import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner sc = new Scanner(System.in); String a = sc.next(); } } 풀이 import java.util.Scanner; public class Solution { public static void main(Strin..
![]()
src 속성 : 이미지가 저장된 주소의 URL 주소 alt 속성 : 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정 src 속성 이미지가 저장된 주소의 URL 주소를 명시 이미지 파일이 src 속성에서 지정한 경로에 없을시, 이미지는 출력되지 않거나 엑스박스 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정 가능 이미지 크기 width 속성 : 이미지 가로 크기 height 속성 : 이미지 세로 크기 이미지 테두리 border 속성 이미지 링크 이미지 맵 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능 태그 usemap 속성과 태그의 name 속성과 연결 -> 이미지와 맵사이의 관계가 설정 태그는 하나 이상의 태그를 가짐 태그 : 버튼과 같은 역할 ..
![]()
하이퍼링크 href 속성 클릭시 연결할 페이지나 사이트의 URL 주소를 명시 HTML 링크 blank _self : 현재 프레임(frame)에서 오픈 (기본값) _blank : 새 창이나 새 탭에서 오픈. _parent : 부모 프레임(frame)에서 오픈. _top : 현재 창의 가장 상위 프레임(frame)에서 오픈. 프레임이름 : 지정된 프레임(frame)에서 오픈. 링크의 상태(state) link : 한 번도 방문한 적이 없는 상태 (기본설정), 밑줄&텍스트 색상(파란색) visited : 한 번이라도 방문한 적 있는 상태 , 밑줄&텍스트 색상(보라색) hover : 링크 위에 마우스를 올려놓은 상태 active : 링크를 마우스로 누르고 있는 상태, 밑줄&텍스트 색상(빨강색) 책갈피 책갈피를 ..
![]()
색 이름 16개의 HTML4 표준 색상 이름 대소문자를 구분하지 않음 현재는 주요 브라우저가 140개의 색상 이름을 모두 지원 https://t1.daumcdn.net/cfile/tistory/213B3A42587D25C21C 16진수 색상 코드표 t1.daumcdn.net RGB 값 rgb(빨강, 초록, 파랑) rgb(0.0.0) - 검정 rgb(255.255.255) - 흰색 RGBA 값 추가 A값을 제외하고 RGB와 동일 rgb(0,0,0,0): A 값 = 투명도 0-완전투명 / 1=단색 HEX 값 16진수 #빨강,초록,파랑 각각 00부터 FF까지의 범위
![]()
스타일 CSS 스타일을 HTML 요소에 직접 설정 오직 단 하나의 HTML 요소에만 스타일을 적용 가능 style 속성값에 사용되는 CSS 속성(property)과 속성값들은 세미콜론(;)을 이용하여 구분 CSS 속성을 하나만 사용할 때나, 여러 개의 CSS 속성 중 맨 마지막 CSS 속성은 세미콜론(;)을 생략 가능 배경색 style 속성을 이용한 배경색 변경 글자 색 style 속성을 이용한 글자색 변경 글자 크기 style 속성을 이용한 글자 크기 변경 문단 정렬 style 속성을 이용한 문단 정렬 변경 여러 스타일 style 속성을 이용하여 한 번에 스타일링 하기! https://www.tcpschool.com/html/html_basic_styles
