200912_TIL

hyeojung·2020년 9월 12일
TIL
0

TIL

목록 보기
27/62
post-thumbnail

📚 edwith 부스트코스 : 비전공자를 위한 HTML/CSS

  • 레이아웃, 미디어쿼리

display

: 요소의 렌더링 박스 유형을 결정하는 속성

  • 기본값: - (요소마다 다름)
  • 속성값
    • none: 요소가 렌더링 되지 않음
    • inline: inline level 요소처럼 렌더링
    • block: block level 요소처럼 렌더링
    • inline-block: inline level 요소처럼 렌더링, block level의 성질을 가짐
    • 이외에도 다양한 값 존재!
  • inline level 요소 사이의 공백과 개행 처리
    : inline 요소에서 공백과 개행은 하나의 여백으로 받아들여진다.
    -> inline, inline-block에서 태그 사이에 공백이나 개행이 있을 경우 약 4px의 여백이 발생한다.
  • display와 box model의 관계
displaywidthheightmarginpaddingborder
blockOOOOO
inlineXX좌우O (설명)O (설명)
inline-blockOOOOO

사실 inline 요소의 padding과 border는 상하좌우 모두 적용된다.
하지만 상하 padding, border는 line-box에는 영향을 주지 못하므로 부모 요소의 박스에 반영되지 않고 인접한 다른 line-box에도 반영되지 않아, 콘텐츠가 겹칠 수 있기 때문에 실무에서는 잘 사용되지 않는다.


visibility

: 요소의 화면 표시 여부를 지정하는 속성

  • 기본값: visible
  • 속성값
    • visible: 화면에 표시
    • hidden: 화면에 표시되지 않으나 공간 차지(box 영역 유지)
    • collapse: 셀 간 경계를 무시하고 숨김(table 요소에만 지정 가능)
  • visibility: hidden;과 display: none;의 차이점
    : display: none;은 요소가 아예 렌더링되지 않으므로 웹페이지가 그 요소와 관련된 정보를 제공하지 않으나, visibility: hidden;은 요소가 보이지는 않지만 렌더링되어 화면에 공간을 차지하고 있다.


float

: 요소를 float(보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성

  • 특징
    • 요소를 보통의 흐름에서 벗어나 띄워지게 함
    • 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음
    • 대부분 요소의 display 값을 block으로 변경함 (예외: inline-table, flex 등)
  • 기본값: none
  • 속성값
    - none: float시키지 않음
    - left: 왼쪽으로 float
    - right: 오른쪽으로 float


clear

: 요소를 floating 된 요소의 영향에서 벗어나게 하는 속성

  • 기본값: none
  • 속성값
    • none: 양쪽으로 floating 요소 허용
    • left: 왼쪽으로 floating 요소 비허용
    • right: 오른쪽으로 floating 요소 비허용
    • both: 양쪽으로 floating 요소 비허용
  • block-level 요소에만 적용 가능


position & offset

: 요소의 위치를 원하는 곳으로 지정할 때 사용하는 속성

position

  • 기본값: static
  • 속성값
    • static: Normal-flow에 따라 배치되며 offset 값 적용 X
    • absolute
      • 부모 요소의 위치를 기준으로 offset에 따라 배치
      • 부모가 position 값(static 제외)을 가질 경우: offset 값의 시작점이 됨 - 부모의 content 영역을 기준으로 가짐(padding까지)
      • 부모의 position 값이 static인 경우: 조상의 position 값이 static이 아닐 때까지 거슬러 올라감
      • block-level 요소가 아닐 경우 display 값이 block으로 변경됨
      • Normal-flow의 흐름에서 벗어난다.
    • fixed
      • 뷰포트(브라우저의 창)를 기준으로 offset에 따라 배치
        즉, 화면 스크롤에 관계없이 항상 화면의 정해진 위치에 나타남
      • 부모의 위치에 영향을 받지 않음
      • block-level 요소가 아닐 경우 display 값이 block으로 변경됨
    • relative
      • 자신이 원래 있어야 할 위치를 기준으로 offset 에 따라 배치
      • 부모의 position 속성에 영향을 받지 않음
      • Normal-flow의 흐름에 따른다.
      • 주변 요소에 영향을 주지 않으면서 offset 값으로 이동
    • sticky: 브라우저 지원율이 낮아 실무에서 많이 사용 못하는 중...

offset

  • top/bottom/left/right 속성으로 사용 가능
  • position 값이 static이 아닐 경우에만 작동
  • 속성값: auto 혹은 length
    (% 단위도 사용 가능 - 상하는 height, 좌우는 width를 기준으로 함)


z-index

: 요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성

  • 기본값: auto
  • 속성값
    • auto: 쌓임 순서를 부모와 동일하게 설정
    • number: 해당 수치로 쌓임 순서를 설정(음수 허용)
  • 특징
    • position 값이 static이 아닌 경우 작동
    • 순서 값이 없을 경우 코드상 순서에 따라 쌓임
    • 부모가 z-index 값이 있을 경우 부모 안에서만 의미 있음
    • 값이 클수록 가장 위에 위치

HTML/CSS의 유효성 테스트

: https://validator.w3.org/





미디어쿼리 Media Queries

: 각 미디어 매체에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것
( 미디어 매체: 모니터와 같은 스크린 매체, 프린트, 스크린 리더기 등등 )

@media(at media)

@media mediaqueries { /* style rules  */ }
  • 위와 같은 방법으로 선언하며, 위 코드의 mediaqueries를 미디어 쿼리 구문이라고 한다.
  • 미디어쿼리 구문이 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시된다.
  • 미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 구성되어 있다.

미디어 타입

  • all, braille, embossed, handheld, print, projection, screen, speech, tty, tv 등
  • 화면을 출력하는 디스플레이가 있는 미디어들은 전부 screen에 속함
  • 곧 상용화될 미디어 쿼리 level 4에서 미디어 타입 대부분이 폐기 예정

미디어 특성

  • width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid 등
  • width는 스크린의 너비가 아니라 뷰포트(브라우저 창)의 너비를 뜻한다.
  • orientation은 width와 height 특성의 값을 비교하여 세로/가로모드를 판별한다. 세로모드에서는 portrait, 가로모드에서는 landscape 키워드와 매칭된다.
  • 곧 상용화될 미디어 쿼리 level 4에서 미디어 특성 중 일부 속성 폐기 예정

미디어쿼리 Syntax

  • [ a ] : a가 나올 수도 있고 나오지 않을 수도 있다.
  • a | b : a 또는 b 둘 중에 하나를 선택
  • a? : a가 0번 나오거나 1번만 나올 수 있음
  • a* : a가 0번 나오거나 그 이상 계속 나올 수 있음
  • media_type : all, screen, print 등 미디어 타입
  • media_feature : width, orientation 등 미디어 특성
media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ; /* 여러 개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표로 구분 */
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ; /* A형태 - 미디어 타입에 and 키워드로 표현식 붙일 수 있음(생략 가능) 
		미디어 타입 앞에 only, not 키워드가 올 수 있다.
      B형태 - 미디어 타입 없이 미디어 표현식이 바로 나올 수 있고
      		and 키워드로 계속 나올 수 있다.
            	(미디어 타입이 명시되지 않으면 all로 간주) */
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ; /* 괄호로 감싸야 하며, 특성 이름과 해당 값으로 이루어진다.
 	특성 이름과 값을 : 기호로 연결하며 특성 이름만 사용하는 것도 가능 */
  • 예제 코드
@media screen { ... }
    /* 미디어 타입이 screen이면 적용 */

@media screen and (min-width: 768px) { ... }
    /* 미디어 타입이 screen이고 width가 768px 이상이면 적용 */

@media (min-width: 768px) and (max-width: 1024px) { ... }
    /* and로 연결된 모든 표현식이 참이면 적용 */

@media (color-index)
    /* 미디어 장치가 color-index를 지원하면 적용 */

@media screen and (min-width: 768px), screen and (orientation: portrait), ...
    /* 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용(and와 반대) */

@media not screen and (min-width: 768px)
    /* not 키워드는 하나의 media_query 전체를 부정
     (not screen) and (min-width: 768px) X
     not (screen and (min-width: 768px)) O */
     
@media not screen and (min-width: 768px), print
     /* 첫 번째 미디어 쿼리에만 not 키워드 적용 */
  • min-/max- 접두사: 범위를 지정하여 간결하게 반응형 사이트를 제작할 수 있음
    • 특성의 값으로 숫자 형태가 들어가는 속성에는 모두 사용 가능
    • orientation (portrait, landscape 키워드), grid, scan 이 세 가지 특성은 값으로 특정 키워드가 들어가므로 프리픽스 사용 불가
    • 현재 유력 표준안에서는 이러한 접두사 대신 부등호 사용 가능

미디어쿼리 선언 방법

  • @media screen and (color)
    : CSS 파일 내부 또는 <style> 태그 내부에 사용 가능, 가장 보편적
  • <link rel="stylesheet" media="screen and (color)" href="example.css">
    : <link> 태그의 media 속성에 미디어 쿼리 선언, 미디어 쿼리가 참이면 뒤의 css 파일 규칙 적용
  • @import url(example.css) screen and (color);
    : CSS 파일 내부 또는 <style> 태그 내부에 사용 가능, @import문 뒤에 미디어 쿼리 선언
  • 꼭 실습해보자 !


뷰포트 Viewport

: 브라우저가 화면을 나타내는 가상의 화면 사이즈

  • 뷰포트 설정: <head> 태그 내에 위치하는 <meta> 태그에 선언
<meta name="viewport" content=" 뷰포트의 설정 값" >
	
<!-- 대부분의 모바일 웹 사이트의 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 설정값
    - width/height: 뷰포트의 가로/세로 크기 지정
    대부분 특수 키워드 device-width(height) 사용
    - initial-scale: 페이지가 처음 나타날 때 초기 줌 레벨 값(소수)
    - user-scalable: 사용자의 확대/축소 기능 설정





📚 edwith 부스트코스 : 쉽게 배우는 자바


변수 variable

  • 변수 선언에 사용되는 자료형 예시
    - 정수 int
    - 실수 double
    - 문자 char
    - 문자열 String
  • 변수는 코드가 재사용될 때 and 코드의 가독성 면에서 매우 유용
  • 데이터 타입의 변환(casting)
    • 변수나 상수 앞에 (자료형)을 붙이는 명시적 형변환
    • 숫자를 문자열로 변환 - toString 메소드 이용
	String f = Integer.toString(1);
    
    // 보너스 ! 변수의 데이터 타입을 알려주는 메소드 getClass
    	System.out.println(f.getClass());



이클립스에서 디버거 사용하기

: 상단의 메뉴 도구 중 벌레 모양으로 생긴 버튼을 클릭하여 사용 가능 !

  • 브레이크 포인트(break point) 지정하기
    : 코드 편집 창의 줄 번호 왼편에서 더블클릭
  • Step Over 버튼
    : 다음 줄에 브레이크 포인트가 생성되고 그 지점까지만 코드 실행
  • Resume 버튼
    : 다음 브레이크 포인트까지 실행되고, 없다면 끝까지 실행
  • Step Into 버튼
    : 코드의 자세한 실행 과정을 볼 수 있음, 어떤 메소드가 실행되는지 보여 줌
  • Step Return 버튼
    : Step Into 버튼을 눌러서 본 후 원래 코드로 되돌아갈 때
  • 벌레 모양 버튼을 눌러도 화면 변화가 없다면?
    window -> perspective -> open perspective -> debug


입력과 출력

// JOptionPane 클래스를 import해야 사용할 수 있음
String id = JOptionPane.showInputDialog("Enter a ID");






오늘 공부하면서 느낀 점

  • =tmi
  • 드디어 비전공자를 위한 html/css 강의를 다 듣고 퀴즈도 다 풀어서 수료증을 발급받았다. 듣기 시작하고 블로그에 정리할 땐 정말 막막했는데 끝이 오다니... 너무 뿌듯하다.
  • 확인해보니 html/css 강의는 8월 28일부터 듣기 시작했던데, 개강해서 강의 듣고 과제도 하면서 약 2주만에 끝낸 거니까 난 멋지다. 완전 대박. 난 최고야.
  • 자바 기초도 얼른 끝내고 자바스크립트 기초 들어야겠다.
  • 코드리뷰권 쓰기로 마음먹은 웹 프로그래밍 강의 대충 둘러보니까 기초 강의 듣는 거 말고도 개인 공부를 꽤 해야 할 것 같던데 방심하지 말자!!
profile
hyeojung
응애 나 애기 개발자
이전 포스트

200911_TIL

다음 포스트

200913_TIL

0개의 댓글