전체 글
[CSS] MDN 과제: 학교 커뮤니티 홈페이지 만들기 ("Assessment wanted for Typesetting a community school homepage")
Give the first paragraph after each heading in the a little bit of text-indentation, say 20px. section>p{ text-indent: 20px; } Make it so that external links have the external link icon inserted next to them. section p a{ background: url("external-link-52.png") no-repeat 100% 0; background-size: 1em; padding-right: 1.2em; } flex flex 컨테이너 : 전체 공간 설정 아이템 : 배치 형태에 관여 inline 요소처럼 내용물 만큼의 공간만 차지 컨테이..
[CSS] MDN CSS 정리3
기본적인 텍스트 및 글꼴 스타일링 글꼴 스타일링 색상 color : 요소의 내용 색상 설정 텍스트, text-decoration의 밑줄&오버라인 모든 CSS 색상 단위 사용 가능 p { color: red; } 글꼴 종류 font-family : 글꼴 지정 브라우저는 액세스하는 컴퓨터가 그 글꼴을 사용할 수 있을 경우에만 적용 그렇지 않을 경우 default font 사용 p { font-family: arial; } 웹 안전 글꼴 가장 많이 사용하는 운영체제의 대부분에서 사용 가능 이름 유형 참고 Arial sans-serif Helvetica로 대체 Courier New monospace 고정폭 로마자, Courier의 대체버전 Georgia serif MS Times New Roman serif 타..
[CSS] MDN 과제: 멋진 박스 만들기 (Assessment wanted for A cool-looking box)
This is a cool box html { font-family: sans-serif; } /* Your CSS below here */ p { /* box */ width: 200px; height: 200px; margin: auto; /* 좌우 가운데 설정 */ border-radius: 10px; border: 1px solid darkred; background-color: red; background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 100%); box-shadow: inset 2px 2px 3px rgba(255,255,255,0.6), inset -2px -2..
[CSS] MDN 과제: 이쁜 레터 모양 종이 만들기 (Assessment wanted for Creating fancy letterheaded paper)
Awesome Company The Awesome Company 102-112 Frail Bend Bridge The Dwindlings Little Hornet HX3 9ZQ UK * { box-sizing: border-box; } html { font-family: sans-serif; } body { margin: 0; background: #ccc; } article { width: 210mm; height: 297mm; margin: 20px auto; position: relative; } address { position: absolute; bottom: 8mm; right: 20mm; } h1 { position: absolute; top: 12mm; left: 20mm; width: 1..
[CSS] MDN 과제: 기본적인 CSS이해
Chris Mills 50 My Street The Town Gray Peach UK ZO50 1MU Tel: 01234 567 890 Mail: chris@nothere.com Editing, writing, and web development services /* General styles - put these straight into your stylesheet */ body { margin: 0; } html { font-family: 'Helvetica neue', Arial, 'sans serif'; font-size: 10px; background-color: #ccc; } .card { width: 35em; height: 22em; margin: 5em auto; background-co..
[Java] 자료구조01 : 입출력, 변수, 배열, 반복문
권오흠 교수님 2016 Java로 배우는 자료구조 ▶ 강의자료 더보기 http://alg.pknu.ac.kr/t/2016-2017-java/342 C에서의 소스코드 = Java에서 class class의 이름은 대문자로 시작 class의 이름과 파일명이 일치해야함 -> refactor > rename 이용 출력 public class Hello { public static void main(String[] args) { System.out.println("Hello Java !!!"); } } main(Strong[] args) : main method (C: main 함수) C는 함수들의 집합, Java는 클래스의 집합 클래스 : 함수들의 집합 ctrl + i : 들여쓰기 각각의 클래스가 메인함수를 가..
[CSS] MDN 정리2
계단식 및 상속 계단식 Cascading Style Sheet : 계단식 동일한 우선순위의 두 규칙 -> 마지막 규칙 적용 우선순위 선택자의 선택이 얼마나 중요한가 요소 선택자는 덜 구체적 -> 중요도↓ class 선택자는 구체적 -> 중요도↑ 상속 부모 요소에 적용된 CSS 속성은 자식요소에게 상속 width와 같은 일부 속성은 상속X 작동방식 상속 색상 : 직접 자식 + 간접 자식에 적용 special class 추가 상식적으로 상속됨 상속 제어 inherit : 상속에 영향O initial : 속성값이 상속 대신 기본 스타일시트 속성값 inherit unset : natural 값으로 재설정 (상속되면 inherit, 상속안되면 initial) 모든 속성 값 재설정 all : 상속 값을 모든 속성에..
[CSS] MDN 정리1
CSS 구문 CSS 규칙 h1 { color: red; font-size: 5em; } selector 중괄호 : 선언블록 선언 속성: 값 대소문자 구분 CSS 모듈 배경 및 테두리 모듈 CSS Working Group이 개발, 지정 CSS 시작하기 CSS 추가하기 head에 태그 추가 HTML 요소 스타일링 HTML 요소 = 선택자 다중 선택 : 쉼표 기본 동작 변경 가능 (list-style-type) class 항목 하나 항목 둘 항목 셋 /* CSS */ .special { color: orange; font-weight: bold; } 해당 class 를 가진 모든 요소를 대상으로 함 요소.class 가능 (li.special) 문서 위치에 따라 스타일 지정 li em { color: rebec..
[html] MDN 정리3
table : table data : table row : thable header colspan="2" rowspan="2" - : col마다 스타일 지정 : 주로 th의 첫번째 행, 바로 아래 : 마지막 행 : 나머지 부분 nested table 중첩 가능 연관성 : 헤더가 행/열의 헤더임을 나타냄 id & header
[html] MDN 정리2
이미지 : void element (자식노드X, 닫는 태그X), repalced element (스타일 적용X) src : URL alt : 이미지를 불러올 수 없을 경우 대체 텍스트 width : 가로 사이즈 height : 세로 사이즈 title : 추가 설명, 굳이 권장X - : 이미지와 캡션을 의미있게 연결 A T-Rex on display in the Manchester University Museum CSS background-image HTML image보다 위치조정이 쉬움 의미없는 장식용 이미지 p { background-image: url("images/dinosaur.jpg"); } 비디오/오디오 비디오 Your browser doesn't support HTML video. Here ..