1. 코드 경량화(= minify 하기)

: 꼭 필요한 작업은 아님. 웹사이트의 규모가 크거나, 방문자가 많은 경우에 효과 있는 처리.

경량화 하는 방법도 여러 가지가 있음!

1. HTML/CSS editor에 코드 경량화(code minifier) 프로그램 설치하기

나는 Bracket editor을 사용했다. 다른 editor에도 이와 비슷한 경로로 경량화를 할 수 있을 것이다!

Bracket 작성 화면에서 바로 Minifier를 설치할 수 있다. JS와 CSS를 둘 다 경량화시킬 수 있는 프로그램이다.

=> JS CSS Minifier 를 설치한다.

* 이때, 경량화 할 코드가 들어있는 파일은 CSS 형태의 파일로 저장한다!

b/c html이 확장자인 파일에 minify를 적용하면 아무 일도 일어나지 않는다!

 

해당 파일을 열어 놓은 상태에서, [편집]-[Minify]를 누르면 

=> 기존파일명.min.css 라는 파일이 새로 생성된다. 이 파일을 열어보면 기존의 css파일과 똑같은 코드가 있는데, 다만 여백과 공백이 모두 사라져서 최소화된 형태로 남아 있다.

(단축키 : Ctrl + Alt + M)

 

+ 개별 파일뿐만 아니라 프로젝트 단위로도 경량화를 할 수 있다.

[편집]-[Minify Project] 를 누르면

=> 해당 파일이 들어있는 프로젝트에 속한 모든 css파일이 경량화된다.

(단축키 : Ctrl + Alt + A)

2. 코드 경량화 해 주는 사이트 활용하기

: http://adamburgess.github.io/clean-css-online/

↑여기에서 왼쪽 부분에 기존 코드를 입력하면, 오른쪽 부분에 경량화된 코드가 나온다.

3. 에디터 등 다른 프로그램을 거치지 않고, 명령 프롬프트에서 실행하기

(생각보다 복잡해서 생략!)

2. CSS 뛰어넘기(Preprocessor)

0. preprocessor의 개념

CSS는 표준화된 기술이다. 어느 한 집단에서 만들어서 배포(X), 위원회가 있고 다양한 논의를 통해 기술을 확정(O)

CSS에 다른 문법을 추가하자는 논의가 있었는데, 그것이 있으면 편해지기도 하지만 반면 CSS를 더 복잡하게 만들 수 있어서 CSS에 새롭게 넣지는 못했다.

그러나 위원회 등 공식적 기관이 아닌, 일부 개인과 집단들은 이 문법을 통해 다른 것들을 만들어 내기도 했는데,

그것이 바로 preprocessor이다.

즉 '표준화되거나 수용되지는 않았지만, 기존 CSS문법을 벗어나지 않는 선에서 변환되면서도 더 많은 기능을 수행할 수 있는 문법으로 코드를 작성하는 기술?도구?'이다.

 

ex. 문제상황

<!-- 기존의 CSS 코드 -->
body {
  font: 14px/1.5 Helvetica, arial, sans-serif;
}
body #logo {
  border-radius: 5px;
}

<!-- Stylus를 사용해서 작성한 코드 -->
body {
  font: 14px/1.5 Helvetica, arial, sans-serif;
  #logo {
    border-radius: 5px;
  }
}

코딩의 극단적 상황 : #logo 와 같은 id selector가 수십 개 있다고 생각해 보자.

그냥 body 태그 안에 적으면 될 일 이지만, CSS에서는 그렇게 할 수 없고 꼭 body #logo 순으로 일일이 body를 앞에 명시해줘야 한다. -> 귀찮음

그래서 Stylus 라는 preprocessor를 만들었는데, 이 Stylus에서는 #logo를 body{} 안에 넣기만 하면 앞에 body라고 언급해 주지 않아도 된다.

이럴 때, Stylus preprocessor를 이용해서 간단하게 코드를 작성하고, 그 다음에 해당 Stylus 파일을 그대로 웹브라우저에 적용할 수 없으므로, 그때 다시 CSS형식으로 컴파일 해 주면 된다.

1. 에디터에서 preprocessor 이용해서 코드 간단히 작성하기

1. 해당 Stylus를 editor에서 사용할 수 있게 하기 위해서, 확장 프로그램을 설치해야 한다.

-> [확장 프로그램 아이콘] 누르고, 'stylus' 검색해서 "Stylus Auto Compiler" 설치하기.

=> 그러면 이제 editor에서 stylus 형태의 파일을 저장하고 사용할 수 있다.

2. Stylus의 확장자는 styl임. => 파일이름.styl 으로 html editor에 파일을 하나 만든다.

(1번 없이 2번 작업이 불가능)

3. 해당 stylus의 간단한 문법을 사용해서 코드를 작성한다.

2. preprocessor을 이용해서 작성한 코드를 다시 컴파일하기

컴파일(compile) : 하나의 언어로 쓰여진 문서를 다른 언어로 옮기는 것.

(여기서는 Stylus로 쓰인 문서를 CSS 형식으로 옮긴다.) 두 가지 방법이 있다.

방법1) 에디터(editor)를 이용해서 컴파일

1. 해당 파일이름.styl 파일을 저장하면, 저장하면서 동시에 파일이름.css 이라는 파일이 하나 더 생긴다.

2. 그 파일은 stylus로 작성된 코드를 css형식으로 컴파일시킨 파일이다.

3. 웹브라우저에 해당 코드를 적용시키려면 2번 파일(css형식)을 사용해야 한다.

: html>head>link^body 에서, link href = "파일이름.css" 라고 명시해 준다.

-> 실행시키면 Stylus preprocessor로 작성해서, css 형식으로 변환된 파일이 html 웹브라우저에 나타난다.

 

** 사실 Stylus 기능은 유용하다고 생각하지만, 지금 나의 입장에서는 크게 사용할 일이 없을 것 같다... 

=> 나중에 필요할 때 다시 보기로 하고, 우선 넘어가자-->>

3. fontello

1. 소개

: 웹페이지에 아이콘을 삽입할 수 있게 해 주는 기능/사이트

: Fontello - icon fonts generator

 

Fontello - icon fonts generator

This site will not work if cookies are completely disabled. {"assets_hash":"d3ab8d621d0205988f10396b1c3a32f0","page_data":{},"locale":"en-US","layout":"fontello.layout"}

fontello.com

↑ 여기 가면 여러 아이콘들을 다운로드 받을 수 있다. 

fontello는 여러 아이콘 개발자들이 만든 아이콘을 한 군데에 모아 놓은 라이브러리 느낌으로 보면 된다.

스크롤을 내리면 각 섹션별로 이름이 있는데, 각 아이콘들을 만든 제작자를 기준으로 구분해 놓았다.

1-2. 아이콘 다운로드 받기

1) 원하는 아이콘 여러 개를 동시에 선택하고, 우상단의 Download 버튼을 누른다.

2) 다운로드 된 파일을 열면 demo.html 파일이 있는데, 열어보면 내가 다운로드 받은 아이콘들이 웹페이지에 사용될 경우 어떤 모양인지를 볼 수 있고, + show codes를 누르면 각 아이콘들이 html 파일에서 사용될 때 쓸 수 있는 코드도 볼 수 있다.

3) 다운로드 된 파일을 열면 css 파일 안에 fontello.css 또는 fontello-embedded.css 파일이 있는데, 후에 이 파일을 html파일의 link 태그를 이용해서 불러올 것이다.

-> 그러므로 이 css파일 전체를 복사해서 내가 사용하는 에디터의 디렉토리 파일로 옮겨 준다!

(*강의에서는 fontello.css 주소를 link 태그에 넣었는데 나는 그렇게 하면 안 되고 fontello-embedded.css 파일을 넣어야 아이콘이 떴다. 하나 해서 안 되면 다른 파일로 시도하면 될 것 같다.)

 

2. 사용법

css파일을 내가 사용하는 에디터의 현재 디렉토리 파일에 넣은 상태에서 작업을 시작한다.

* 모든 과정은 에디터에서 다 이뤄진다!

* 두 가지 방법이 있다.

방법 1.

더보기

1) head 태그 안에 link 태그를 만들고, href 안에 "css/fontello.css" 또는 "css/fontello-embedded.css" 를 입력.

= 아이콘이 있는 css파일을 불러오는 과정.

2) head 태그 안에 style 태그를 만들고, body{ } 안에 font-family: "fontello"; 를 입력한다.

3) demo.html 파일로 가서, show codes를 클릭한 후 넣고 싶은 아이콘의 코드번호를 복사해서 body 태그에 복사.

4) 이때 코드의 맨 앞에 '0'이 있는데, 이 0을 대신 '&#' 로 바꿔 주고 맨 끝에 세미콜론!

<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" href="css/fontello-embedded.css">
    <style>
        body{
            font-family: "fontello";
        }
    </style>
</head>
<body>
    &#xf09e;   // 해당 아이콘의 코드 이름
</body>
</html>

이러면 아이콘이 보인다!

방법 2.

더보기

1) head 태그 안에 link 태그를 만들고, href 안에 "css/fontello.css" 또는 "css/fontello-embedded.css" 를 입력.

= 아이콘이 있는 css파일을 불러오는 과정.

* 이 과정은 위와 똑같다.

2) i 태그를 사용한다.

: i 태그 안에 class를 정의하고, class의 이름으로는 demo.html에서 show codes를 체크 해제하면 나오는 각 아이콘의 이름을 입력한다.

* i 태그는 원래 기울임꼴 글씨 표시에 쓰이는데, link 태그로 fontello css파일을 불러오고 + class로 해당 아이콘 이름을 지정할 경우 아이콘도 나타낼 수 있다!

<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" href="css/fontello-embedded.css">
</head>
<body>
    <i class="icon-rss"></i>   // 해당 아이콘의 이름
</body>
</html>

이러면 아이콘이 보인다!

2-2. 아이콘 +a

당연하겠지만, 아이콘을 불러올 수 있다면 해당 아이콘에게도 우리가 기존에 알고 있던 css서식을 적용할 수 있다.

ex1) 아이콘에서 color 속성을 지정한다면, 해당 아이콘의 색이 바뀌어서 나온다.

ex2) 아이콘에서 font-size도 지정할 수 있다. 아이콘도 font의 일종으로 취급하는 것 같다.

(그래서 아이콘 라이브러리 사이트 이름이 fontello인듯)

=> 그 외의 text-align 등, 일반 글자에 적용되는 서식이라면 다 아이콘에 적용된다고 해도 무방할 것 같다.

3. fontello 기본 원리와 확장

3-1. 작동 원리

복잡한 설정을 하지 않았는데 어떻게 fontello가 잘 작동할까? fontello를 사용하는 데 쓴 코드들 중 크게 두 가지 부분에서 fontello의 작동원리를 알아보자.

* 원리는 모두 위에서 불러온 css/fontello.css 또는 css/fontello-embedded.css 파일에 있다.

 

1) font-family: "fontello";

불러온 fontello-embedded.css 파일을 열어보면, 맨 위의 @font-face 라는 선택자가 { } 로 묶여져 있다.

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?56489907');
  src: url('../font/fontello.eot?56489907#iefix') format('embedded-opentype'),
       url('../font/fontello.svg?56489907#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

즉 이 @font-face를 사용하려면 font-family를 font-family: "fontello"; 로 지정해야 하는 것이다.

아래의 src url은, 각 웹 브라우저마다 폰트를 처리하는 규격 등이 달라서 각각을 정의해 준 것이다.

 

2) <i class="아이콘 이름"></i>

마찬가지로 fontello-embedded.css 파일에 들어가서 해당 아이콘 이름을 Ctrl + F로 검색해 보면,

.icon-rss:before { content: '\f09e'; } /* '' */

이런 식으로 다운로드 받은 아이콘마다 서식 지정이 되어 있다.

위 코드는 해당 i태그를 사용하고 content라는 속성 값으로 "\f09e"를 지정한다면 icon-rss라는 이름의 아이콘을 지정하는 것과 같은 효과를 낸다는 말이 된다.

 

그렇다면 이 뒤에 붙은 :before는 무엇일까?

해당 css파일의 앞 부분을 보면 이런 코드가 있다.

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

^은 문자열의 앞/뒤 부분을 나타낸다.

1) "문자열"^ : "문자열"로 시작하는 모든 문자열을 의미

2) ^"문자열" : "문자열"로 끝나는 모든 문자열을 의미

그러므로 class^="icon-" 의 의미는 class가 "icon-"으로 시작하는 모든 선택자에 해당하는 사항이라는 의미이다.

뒷 줄에는 font-family: "fontello"; 라고 되어 있는데, 즉 윗 줄의 조건을 만족하면 font-family: "fontello"; 서식을 적용하겠다, 즉 해당 코드를 아이콘으로 나타내게 하겠다는 의미이다.

=> 그러므로 i 태그의 class를 사용해서 아이콘을 나타낼 때, 아이콘 이름은 다 icon-으로 시작하므로 이름을 맞게만 입력한다면 font-family: "fontello"; 서식이 자동 적용되는 것이다.

 

3-2. 확장편

fontello의 아이콘들을 이용해서 할 수 있는 더 다양한 것들을 알아보자.

1) :before , :after => 특정 선택자/텍스트의 앞/뒤에 css서식 적용하기

:hover 처럼 style 태그 안의 선택자 뒤에 :before 또는 :after를 입력하고 { }를 열어서 CSS 서식을 작성하면 된다.

<!doctype HTML>
<html>
<head>
    <link rel="stylesheet" href="css/fontello-embedded.css">
    <style>
        #now{
            font-size : 100px;
            text-align : center;
            margin-top : 30px;
            color : limegreen;
            background-color : black;
        }
        #back:before{
            font-family: "fontello";
            content: "AB";
            font-size : 100px;
            color : deeppink;
        }
    </style>
</head>
<body>
    <i class="icon-rss" id="now"></i>
    <i class="icon-videocam"></i>
    <i class="icon-user-plus"></i>
    <i class="icon-flight"></i>
    <i class="icon-home"></i>
    <div id="back">CSS</div>
</body>
</html>

만약 이렇게 작성한다면, 

이런 결과가 나올 것이다!

 

2) animation 효과

: 아이콘을 넣었는데, 이 아이콘이 움직이게 하고 싶다면 사용하는 효과.

 

방법

1) link 태그를 하나 더 만들고, href 안에 "css/animation.css" 라고 입력한다.

= css 폴더 안의 animation css 파일을 불러온다.

2) 효과를 적용하고 싶은 선택자의 class명에 animation-(적용하고 싶은 효과)를 입력한다.

: 이때, 어떤 효과를 적용할지는 animation.css 파일을 보고 효과명을 그대로 입력해야 적용된다.

<link rel="stylesheet" href="css/animation.css">
<i class="icon-home animate-spin"></i>

이렇게 class명의 icon 이름 적용한 코드 바로 뒤에 이어서 효과명을 쓴다.

해당 animate-spin 효과는 회전 효과로, 적용하면 아이콘이 빙글빙글 도는 효과를 낼 수 있다. (로딩 이미지에 적합할듯)

4. fontello 폰트 만들기

: 정확히는 다른 이미지를 아이콘으로 만드는 방법.

* 이 방법 역시 fontello 웹사이트를 이용해야 가능하다.

* 아무 이미지나 아이콘으로 바꿀 수 없고, 벡터 이미지를 바꿀 수 있다!

+ 벡터 이미지는 Noun Project: Free Icons & Stock Photos for Everything (thenounproject.com) 여기서 받을 수 있다.

 

Noun Project: Free Icons & Stock Photos for Everything

 

thenounproject.com

 

<방법>

1. thenounproject 사이트에서 원하는 벡터 이미지를 다운로드 받는다.

2. 다운로드 받은 이미지를 fontello의 아이콘들이 나오는 페이지에서 'Custom Icons' 영역에 드래그한다.

3. 그러면 해당 벡터 이미지를 아이콘 형식으로 다운 받아서 사용할 수 있다.

 

만약 fontello에서 기존에 다운로드 받았던 아이콘들을 알 수 없다면?

1. Download webfont 버튼 왼쪽으로 두 칸 옆의 연장 버튼 클릭하고 Import 버튼 누르기

2. 파일 선택창에서 config.json 파일을 불러오면, 그동안 내가 선택했던 아이콘들을 모두 볼 수 있다.

 

 

 

'front-side > CSS' 카테고리의 다른 글

Semantic UI : 소개 ~ js가 필요한 컴포넌트의 사용법  (0) 2021.05.31
9. 그래픽 fin ~ 유지보수-link와 import  (0) 2021.04.13
8. 그래픽  (0) 2021.04.12
7. 레이아웃  (0) 2021.04.07
6. 레이아웃 추가(심화)내용  (0) 2021.04.05

1. For문

1. for문 기본실행

public static void main(String[] args) {
		int sum = 0;
		for(int i=1; i<=100; i++) {
			sum += i;
		}
		System.out.println(sum);
	}

* for문은 연속하는 수의 합을 구할 때도 많이 사용한다.

=> 이럴 때는 += 등의 증감연산자를 사용할 수 있다.

 

2. for문 안에서 정의된 변수는 로컬 변수(local variable)로, for문 밖으로 값을 갖고 나올 수 없다.

오류 예시!

public static void main(String[] args) {
		for(int i=1; i<=100; i++) {
			sum += i;
		}
		System.out.println(sum);
	}

* 이 코드는 실행시키면 오류가 난다.

: b/c sum 변수는 for문 안에서 정의되었는데, for문 바깥에서 사용하려고 하면 sum변수 값을 불러올 수 없다.

=> sum변수를 for문 밖에서도 사용하고 싶다면, for문이 시작하기 이전에, 즉 for문 밖에서 정의를 먼저 해 주면 된다.

 

3. for문 : 초기화식, 조건식, 증감식에 각각 두 개 이상의 변수 넣기

public static void main(String[] args) {
		int sum = 0;
		for(int i=1, j=100; i<=100 && j>=50 ; i++, j--) {
			sum = sum + i * j;
		}
		System.out.println(sum);
	}

* for문의 ()안에는 여러 변수들의 초기화식, 조건식, 증감식이 들어갈 수 있다.

* for (변수1 초기화식, 변수2 초기화식 ; 변수1 조건식 (&&/|) 변수2 조건식 ; 변수1 증감식, 변수2 증감식) 이렇게!

 

4. for문 변수로 float타입을 사용하지 않는 게 좋다.

그 이유는?

public static void main(String[] args) {
		for (float k = 0.1f ; k<=1 ; k+=0.1f) {
			System.out.println(k);
		}
	}

: 이론상 초기화식에서 k=0.1이고 0.1씩 더해서 1까지 실행하므로 10번을 실행하는 게 맞다.

하지만 for문은 9번 실행되었는데, 그 이유는 float는 부동 소수점을 사용하기 때문에 0.1을 정확하게 표현하지 못하고, 실제로는 0.1보다 조금 큰 값을 k에 더하게 된다. 그래서 9번만 실행된다.

 

5. 중첩 for문

: for문 안에 또 다른 for문을 쓸 수 있다. 중첩에 대해서 개수 제한은 없는 듯 하다.

중첩 for문을 이용해서 구구단을 작성해 보았다.

public static void main(String[] args) {
		for(int m=2 ; m<=9 ; m++) {
			System.out.println("*** " + m + "단 ***");
			for (int n=1 ; n<=9 ; n++) {
				System.out.println(m + "x" + n + "=" + (m*n));
			}
		}
	}

 

2. while문

while문과 for문은 기본적으로 같은 반복문이라서 for문으로 작성할 수 있는 코드는 while문으로도 작성할 수 있다.

다만 for문은 반복할 횟수만큼 반복시키는 경우가 많고, while문은 특정 조건에 해당할 때만 코드를 실행한다는 점에서 차이가 있다.

1. while문으로도 for문처럼 연속되는 숫자의 합을 구할 수 있다.

public static void main(String[] args) {
		int i=1; int sum = 0;
		while (i<=10) {
			sum += i;
			System.out.println(sum);
			i++;
		}
	}

 

2. while문은 해당 조건을 만족하면 실행문이 무한히 실행되어 루프가 발생할 수 있다. -> 주의!

public static void main(String[] args) {
		int i=3; int sum = 0;
		while (i>=2) {
			sum += i;
			System.out.println(sum);
			i++;
		}
	}

* i>=2 를 만족하면 while문은 계속 실행된다. 그런데 초기값이 i=3이고, i++으로 계속 i가 증가하므로 계속 이 조건을 만족하게 된다.

=> 이 경우 Terminate 버튼을 눌러서 강제 종료하지 않으면 무한히 실행된다.

 

+ while문에 딱히 작성할 조건이 없을 때?

-> while(true) 로 작성하고, 중간에 if() {break;} 를 작성하는 방법도 있다.

 

* for문과의 차이점-1

: while는 for문처럼 초기화식이 없기 때문에, 반복문에 넣을 변수를 while문 전에 미리 선언해 주어야 한다.

public static void main(String[] args) {
		int i=1; int sum = 0;
		while (i<=100) {
			sum += i;
			i++;
		}
		System.out.println(sum);
	}

-결과 : 5050

* for문과의 차이점-2

: while문은 for문처럼 증감식이 없다. 그래서 증감연산자를 어디에 배치하는지에 따라 결과값이 달라질 수 있다.

위의 식과 증감연산자의 위치만 다르게 해 보면, (증감연산자를 위에 배치)

public static void main(String[] args) {
		int i=1; int sum = 0;
		while (i<=100) {
			i++;
			sum += i;
		}
		System.out.println(sum);
	}

-결과 : 5150

* 중간에 i++ 처럼 증감문을 써 주지 않으면, 반복 변수의 값이 동일한 채 무한루프가 발생한다.

흔히 발생하는 실수이므로 주의!!

 

3. 반복문을 멈추는 또 다른 방법 : break;

break ; 는 for, while, do-while, switch문 등 다양한 구문에 사용할 수 있다.

break; 를 사용하면 반복문을 빠져나올 수 있다!

그러나 if() 을 사용해서, 어느 상황에 break;를 실행할지를 명시해 주어야 사용할 수 있다.

ex) 1부터 30까지의 합을 구하는데, 중간에 7과 3의 최소공배수를 만나면 반복문 빠져나오기

public static void main(String[] args) {
		int i=1; int sum=0;
		while(i<=30) {
			sum = sum + i;
			i++;
			if(i == 7*3) {
				break;
			}
		}
		System.out.println(i + " " + sum);
	}

 

4. while문과 비슷한 do-while문

: while문은 () 안의 조건이 참이면 그 다음에 실행문으로 넘어가지만,

do-while문은 do{} 안의 실행문을 먼저 실행하고, 그 다음에 while()의 조건이 맞는지 확인한다.

위와 같은 상황을 do-while문으로 코딩해 보았다.

public static void main(String[] args) {
		int i=1; int sum=0;
		do {
			sum += i;
			i++;
		}while(i!=7*3);
		System.out.println(sum);
	}

* 원래 while문과 비교해 보면,

while 안의 ()와 if() 부분의 조건절 부분은 전부 while 안의 ( ) 로 이동하고,

그 외의 '조건이 맞았을 때'의 실행문은 전부 do 안의 { } 로 이동한다.

 

5. 증감식의 경우, char 타입 변수도 사용 가능하다.

public static void main(String[] args) {
		for(char upper='A'; upper<='Z'; upper++) {
			for(char lower='a'; lower<='z'; lower++) {
				System.out.println(upper + "-" + lower);
			}
		}
	}
}

: for문의 경우, 초기식을 char변수의 알파벳으로 설정하고,

증감식에 ++를 표현했더니 알파벳 순서대로 A,B,C, ..., Z 까지 출력되는 것을 볼 수 있다.

 

6. continue : break;와 반대 역할

: 특정 조건을 만족했을 때만 결과를 실행한다.

public static void main(String[] args) {
		for(int i=1;i<=100;i++) {
			if(i%2 == 0) {
				continue;
			}
			System.out.println(i);
		}
	}

 

위의 경우, i%2!=0 인 경우에는 결과로 출력되지 않는다.

+ continue; 와 break; 모두 if() 안에 조건을 입력해야만 실행할 수 있다.

 

'server-side > JAVA' 카테고리의 다른 글

Chapter 4  (0) 2021.05.04

Baekjoon 단계별 문제풀이 - if문의 5문제 풀어봄.

1. [1330] 두 수 비교하기

import java.util.Scanner;

public class Main {

	public static void main(String[] args) {
		Scanner scanner = new Scanner(System.in);
		int A = scanner.nextInt();
		int B = scanner.nextInt();
		if(A<=10000 && A>=-10000 && B<=10000 && B>=-10000) {
			if(A>B) {
				System.out.println(">");
			}else if(A==B) {
				System.out.println("==");
			}else if(A<B) {
				System.out.println("<");
			}
		}else {
			System.out.println("ERROR");
		}
		scanner.close();
	}
}

2. [9498] 시험 성적 비교하기

import java.util.Scanner;

public class Main {

	public static void main(String[] args) {
		Scanner scanner = new Scanner(System.in);
		int grade = scanner.nextInt();
		if (grade>=0 && grade<=100) {
			if(grade>=90) {
				System.out.println("A");
			}else if(grade>=80) {
				System.out.println("B");
			}else if(grade>=70) {
				System.out.println("C");
			}else if(grade>=60) {
				System.out.println("D");
			}else {
				System.out.println("F");
			}
		}else {
			System.out.println("ERROR");
		}
		scanner.close();
	}
}

3. [2753] 윤년

import java.util.Scanner;

public class Main {

	public static void main(String[] args) {
		Scanner scanner = new Scanner(System.in);
		int year = scanner.nextInt();
		if(year>=1 && year<=4000) {
			if((year%4 == 0 && year%100 !=0)|(year%400 == 0)) {
				System.out.println(1);
			}else {
				System.out.println(0);
			}
		}else {
			System.out.println("ERROR");
		}
		scanner.close();
	}
}

* '배수', '약수' 등의 문제는 나머지 연산자 %을 이용하면 간단하게 코드 작성할 수 있다.

* and조건을 묶고, or 조건을 바깥에 쓰는 등 () 괄호를 이용하면 여러 연산자를 섞어서 한 줄로 조건을 만들 수 있다.

4. [14681] 사분면 고르기

import java.util.Scanner;

public class Main {

	public static void main(String[] args) {
		Scanner scanner = new Scanner(System.in);
		int x = scanner.nextInt();
		int y = scanner.nextInt();
		if(x>=-1000 && x<=1000 && x!=0 && y>=-1000 && y<=1000 && y!=0 ) {
			if(x>0 && y>0) {
				System.out.println(1);
			}else if(x<0 && y>0) {
				System.out.println(2);
			}else if(x<0 && y<0) {
				System.out.println(3);
			}else if(x>0 && y<0) {
				System.out.println(4);
			}
		}else {
			System.out.println("ERROR");
		}
		scanner.close();
	}
}

5. [2884] 알람 시계

import java.util.Scanner;

public class Main {

	public static void main(String[] args) {
		Scanner scanner = new Scanner(System.in);
		int H = scanner.nextInt();
		int M = scanner.nextInt();
		if (H>=0 && H<=23 && M>=0 && M<=59) {
			if(M<45 && H==0) {
					System.out.println(23+" "+(M+15));
			}else if(M<45 && H!=0) {
					System.out.println((H-1)+" "+(M+15));
			}else {
				System.out.println(H+" " + (M-45));
			}
		}else {
			System.out.println("ERROR");
		}
		scanner.close();
	}
}

대부분의 상황에서는 M-45를 하면 되는 간단한 상황이지만, 

1) H = 0일 때

2) M < 45일 때

3) H!=0 이고 M>=45일 때

위의 1)과 2)는 다른 처리를 해 줘야 하는 상황이다.

그래서 특수한 경우인 1), 2)를 앞의 if와 else if에 할당하고, 나머지 모든 경우인 3)은 else에 할당하였다.

 

'server-side > JAVA Algorithm' 카테고리의 다른 글

Step.9 : 9-1 ~ 9-6  (0) 2021.06.05
Chapter 3  (0) 2021.05.03

1. 조건문

1-1. IF문

1) 해당 조건에 대한 실행할 실행문이 하나라면 {}를 생략해도 좋지만, 그 이외에는 다 {}를 넣어야 한다.

	public static void main(String[] args) {
		int score = 91;
		
		if (score >=90) {
			System.out.println("You are Level A.");
			System.out.println("Congratulations!");
		}
		if (score <80) 
			System.out.println("You are Level B."); System.out.println("Keep up the good work");
			System.out.println("Try a little harder!");
	}

이렇게 if문 바로 아래 줄에, 같은 줄에 실행문을 두 개 이상 적는다고 해도, {}가 없으면 if문은 맨 앞의 실행문만 if문에 적용시킨다.

2) IF문으로 성적이 나오는 프로세스를 비슷하게 따라 해 보았다.

import java.util.Scanner;

public class chapter_4 {

	public static void main(String[] args) {
		Scanner scanner = new Scanner(System.in);
		System.out.println("What's your midterm score?");
		int midterm = scanner.nextInt();
		System.out.println("What's your assignment score?");
		int assignment = scanner.nextInt();
		System.out.println("What's your team project score?");
		int team_project = scanner.nextInt();
		System.out.println("What's your final exam score?");
		int final_exam = scanner.nextInt();
		double score = midterm*0.3 + assignment + team_project*0.3 + final_exam*0.3;
		
		System.out.println("Your entire score is " + score);
		
		if (score >=90) {
			String grade = "A";
			System.out.println("Your grade is " + grade);
		}else if (score >=80){
			String grade = "B";
			System.out.println("Your grade is " + grade);
		}else if (score >=70) {
			String grade = "C";
			System.out.println("Your grade is " + grade);
		}else if (score >=60) {
			String grade = "D";
			System.out.println("Your grade is " + grade);
		}else {
			String grade = "F";
			System.out.println("Your grade is " + grade);
		}
		scanner.close();
	}

}

* 갑자기 생각나서 써봄

: printf()에서 여러 개의 형식과 여러 출력을 한꺼번에 지정할 때는 버전 오류가 난다!

Java se 11 이전 버전에서는 잘 작동하는지 궁금했지만 Oracle 회원가입을 해서 깔아야 한다니 참으로 귀찮은 일이 아닐 수 없다.

그래서 printf 함수는 사용을 안 하기로 했다. 어차피 백준에서는 Java se 11에 맞게 코드가 잘 작동된다고 한다.

 

3) 아쉽지만 printf 대신 println으로 로또번호 출력기를 만들어 봄

public static void main(String[] args) {
		int num1 = (int) (Math.random()*45 +1);
		int num2 = (int) (Math.random()*45 +1);
		int num3 = (int) (Math.random()*45 +1);
		int num4 = (int) (Math.random()*45 +1);
		int num5 = (int) (Math.random()*45 +1);
		int num6 = (int) (Math.random()*45 +1);
		
		System.out.println(num1);
		System.out.println(num2);
		System.out.println(num3);
		System.out.println(num4);
		System.out.println(num5);
		System.out.println(num6);
	}
}

: Math.random() <- 대문자 필수!

얘는 double 타입의 0부터 1 사이에 있는 난수를 발생시키는데, *45를 하고 1을 더해준 다음 강제로 int 타입으로 변환시킨다. 그러면 1부터 45사이에 값을 갖는 로또 번호 랜덤 생성기가 된다.

4) 치밀하게 설계하면 주사위 게임도 가능한 듯.

public static void main(String[] args) {
		int dice = (int)(Math.random()*6 +1);
		if(dice == 1) {
			System.out.println("1칸 전진하시오.");
		}else if(dice == 2) {
			System.out.println("무인도입니다. 한 턴 쉬어가세요.");
		}else if(dice == 3) {
			System.out.println("상대편의 말을 잡았습니다. 한번 더 굴리세요.");
		}else if(dice == 4) {
			System.out.println("통행료로 100,000원을 제출하세요.");
		}else if(dice == 5) {
			System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
		}else{
			System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
		}
	}

1-2. Switch문

똑같은 주사위 게임을 Switch문을 이용해서 만들 수 있다.

public static void main(String[] args) {
		int dice = (int)(Math.random()*6 +1);	
		switch(dice) {
		case 1:
			System.out.println("1칸 전진하시오.");
			break;
		case 2:
			System.out.println("무인도입니다. 한 턴 쉬어가세요.");
			break;
		case 3:
			System.out.println("상대편의 말을 잡았습니다. 한 턴 더 굴리세요.");
			break;
		case 4:
			System.out.println("통행료로 100,000원을 제출하세요.");
			break;
		case 5:
			System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
			break;
		default:
			System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
			break;
		}
	}

오히려 Switch문은 숫자 형태의 값을 갖는 변수를 사용하므로, 코드가 더 간단하게 작성될 수 있다.

+ 복잡하게 실행하면 진짜 주사위 게임도 가능할 듯.

+ 미연시 게임?처럼 대답에 따라서 스토리가 달라지는 게임도 가능할 듯.

 

Switch문의 대상인 변수의 값에 따라 출력되는 결과를 다르게 하고 싶다면, 

반드시 각 case마다 break; 문을 작성해야 한다!!

그렇지 않으면 이렇게 된다. ↓

public static void main(String[] args) {
		int dice = 2;
		
		switch(dice) { 
		case 1:
			System.out.println("1칸 전진하시오.");
		case 2:
			System.out.println("무인도입니다. 한 턴 쉬어가세요.");			
		case 3:
			System.out.println("상대편의 말을 잡았습니다. 한 턴 더 굴리세요.");		
		case 4:
			System.out.println("통행료로 100,000원을 제출하세요.");			
		case 5:
			System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");			
		default:
			System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
		
		}
	}

: switch문의 변수인 dice는 2이다. 그런데 switch문의 case 사이마다 변수가 없어서, 각 case가 구분되지 않고 위에서부터 아래로 차례대로 코드가 실행되어서 이처럼 여러 경우에 해당하는 결과들이 다 같이 나오고 있다.

 

1) switch문의 변수 : char 타입의 입력 받기

import java.util.Scanner;

Scanner scanner = new Scanner(System.in);

char alphabet = alphabet.next().charAt(0);

+ char타입은 nextInt 등의 기능이 없다. 그래서 next() 다음에 charAt()을 입력한다.

+ 그런데 charAt(0) 에서 0의 의미가 무엇인지는 잘 모르겠다.

import java.util.Scanner;

public class chapter_4 {

	public static void main(String[] args) {
		System.out.println("What's your code?");
		Scanner scanner = new Scanner(System.in);
		char alphabet = scanner.next().charAt(0);
		
		switch(alphabet) { 
		case 'a':
			System.out.println("1칸 전진하시오.");
			break;
		case 'b':
			System.out.println("무인도입니다. 한 턴 쉬어가세요.");
			break;
		case 'c':
			System.out.println("상대편의 말을 잡았습니다. 한 턴 더 굴리세요.");
			break;
		case 'd':
			System.out.println("통행료로 100,000원을 제출하세요.");
			break;
		case 'e':
			System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
			break;
		default:
			System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
			
		}
	}
}

2) Switch문의 변수 : String 타입의 입력 받기

import java.util.Scanner;

Scanner scanner = new Scanner(System.in);

String str = scanner.nextLine();

+ 그런데 nextLine 코드를 사용할 때, 공백을 인식/인식하지 못해서 생기는 불편함에 대해서는 나중에 알아보자.

import java.util.Scanner;

public class chapter_4 {

	public static void main(String[] args) {
		System.out.println("What's your code?");
		Scanner scanner = new Scanner(System.in);
		String code = scanner.nextLine();
		
		switch(code) { 
		case "Apple":
			System.out.println("1칸 전진하시오.");
			break;
		case "Banana":
			System.out.println("무인도입니다. 한 턴 쉬어가세요.");
			break;
		case "Carrot":
			System.out.println("상대편의 말을 잡았습니다. 한 턴 더 굴리세요.");
			break;
		case "Daisy":
			System.out.println("통행료로 100,000원을 제출하세요.");
			break;
		case "Egg":
			System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
			break;
		default:
			System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
			
		}
	}
}

공백을 잘 인식하는지를 보기 위해서, String 변수의 각 case값을 2어절 이상의 단어로 설정했다.

import java.util.Scanner;

public class chapter_4 {

	public static void main(String[] args) {
		System.out.println("What's your code?");
		Scanner scanner = new Scanner(System.in);
		String code = scanner.nextLine();
		
		switch(code) { 
		case "Apple Juice":
			System.out.println("1칸 전진하시오.");
			break;
		case "Banana Smoothie":
			System.out.println("무인도입니다. 한 턴 쉬어가세요.");
			break;
		case "Carrot Cake":
			System.out.println("상대편의 말을 잡았습니다. 한 턴 더 굴리세요.");
			break;
		case "Daisy Tea":
			System.out.println("통행료로 100,000원을 제출하세요.");
			break;
		case "Egg Tart":
			System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
			break;
		default:
			System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
			
		}
	}
}

공백은 잘 인식하는 것 같다. 그리고 String 타입의 경우 정확한 string을 입력해야 한다! 대소문자도 구분한다!

ex) 'Egg Tart'를 대소문자 구분, 정확히 입력해야지만 해당 결과가 나온다

-> egg tart (X) , Egg Tart (O)

 

+ Scanner에는 여러 method가 있다.

ex) int 타입 변수 입력 시에는 nextInt 를 쓰는 것처럼!

=> String 타입 변수 입력시에는 .next 또는 .nextLine 를 사용하는데, 둘 사이에 차이가 있다.

1) scanner.next();

띄어쓰기 이후의 입력은 받아들이지 않는다.

각 입력의 구분 단위가 \n처럼 띄어쓰기인 것 같다.

import java.util.Scanner;

public class chapter_4 {

	public static void main(String[] args) {
		Scanner input = new Scanner(System.in);
		String data = input.next();
		System.out.println(data);
		input.close();
	}
}

2) scanner.nextLine();

띄어쓰기 이후의 입력을 받아들인다.

각 입력의 구분 단위가 enter 즉 줄바꿈인 것 같다.

 

'server-side > JAVA' 카테고리의 다른 글

Chapter 4-2  (0) 2021.05.05

Baekjoon 단계별 문제풀이 중 "사칙연산" 카테고리 11문제 풀이

(일부는 풀이 적는 거 까먹어서 1,2,3,4,5,6,10,11번만 있음)

package ml.app2;

import java.util.Scanner;

public class chapter_3 {

	public static void main(String[] args) {	
		System.out.println("#1");
		System.out.println("Hello World!");
		System.out.println("\n\n#2");
		System.out.println("강한친구 대한육군");
		System.out.println("강한친구 대한육군");
		System.out.println("\n\n#3");
		System.out.println("\\    /\\");
		System.out.println(" )  ( ')");
		System.out.println("(  /  )");
		System.out.println(" \\(__)|");
		System.out.println("\n\n#4");
		System.out.println("|\\_/|");
		System.out.println("|q p|   /}");
		System.out.println("( 0 )\"\"\"\\");
		System.out.println("|\"^\"`    |");
		System.out.println("||_/=\\\\__|"); 
		System.out.println("\n\n#5\n");
		Scanner scanner = new Scanner(System.in);
		int A = scanner.nextInt();
		int B = scanner.nextInt();
		if(A>0 && B<10) {
			int result1 = A + B;
			System.out.println("A+B= " + result1);
		}else {
			System.out.println("ERROR!");
		} 
		System.out.println("\n\n#6\n");
		int C, D;
		C = scanner.nextInt();
		D = scanner.nextInt();
		if(C>0 && C<10 && D>0 && D<10) {
				int result2 = C - D;
				System.out.print(result2);
		}else {
				System.out.println("ERROR!");
		}
		System.out.println("\n\n#10\n");
			int E = scanner.nextInt();
			int F = scanner.nextInt();
			int G = scanner.nextInt();
			if(E>=2 && E<=10000 && F>=2 && F<=10000 && G>=2 && G<=10000) {
				int result3 = (E+F)%G;
				int result4 = ((E%G)+(F%G))%G;
				int result5 = (E*F)%G;
				int result6 = ((E%G)*(F%G))%G;
				
				System.out.println(result3);
				System.out.println(result4);
				System.out.println(result5);
				System.out.println(result6);
			}else {
				System.out.println("ERROR!");
			} 
		System.out.println("\n\n#11\n");
		int H = scanner.nextInt();
		int I = scanner.nextInt();
		if (H>=100 && H<1000 && I>=100 && I<1000) {
			int result7 = H*(I%10);
			System.out.println(result7);
			int result8 = H*((I%100)-(I%10));
				if (result8 == 0) {
					System.out.println(0);
				}else {
					System.out.println(result8/10);
				}
			int result9 = H*(I-(I%100));
				if (result9 == 0) {
					System.out.println(0);
				}else {
					System.out.println(result9/100);
				}
			int result10 = result7 + result8 + result9;
			System.out.println(result10);
		}else {
			System.out.println("ERROR");
		}
		scanner.close();
	}
}

정리

#5, #6

5번, 6번문제는 정수를 입력으로 받아서 scanner.nextInt(); 를 사용했다.

그러나 만약 정수가 아니라 문자열, String을 입력으로 받았더라면 상황이 복잡했을 수 있다.

nextInt의 경우, 숫자와 숫자 사이의 공백을 입력으로 받아들이지 않고 숫자만을 입력으로 받아들인다면,

String을 입력으로 받는 경우 두 입력 사이의 공백 등이 받아들여졌을 수 있다.

#11

세 자리 자연수 A, B를 입력으로 받되, 계산 과정에서 B의 각 자릿수의 숫자가 필요한 문제였다.

나는 String.valueOf() 과 .substring을 이용해서 int 타입의 B를 string으로 바꾼 다음 각 자릿수를 출력하려고 했으나, 훨씬 더 간단한 방법이 있었다.

=> abc라는 세 자리 자연수가 있을 때, %을 이용하면 각 자릿수를 쉽게 출력할 수 있다.

일의자리) abc % 10 = c.

십의자리) abc % 100 = bc. (abc*100)-(abc%10) = bc-c = b0. b0 / 10 = b.

백의자리) abc-(abc%100) = abc-bc = a00. a00 / 100 = a.

 

또한 input을 받기 위해 Scanner method를 사용했다면, 코드가 끝날 때 닫아줘야 한다!

scanner.close(); <-이렇게.

 

'server-side > JAVA Algorithm' 카테고리의 다른 글

Step.9 : 9-1 ~ 9-6  (0) 2021.06.05
Chapter 4-1 if문  (0) 2021.05.04

그래픽

5) SVG

: 직접적인 그래픽과 상관은 없지만, SVG파일도 CSS에서 효과를 주는 대상이기 때문에 있는 챕터.

 

1. SVG파일이란?

Vector file로, 기존의 bitmap 이미지와 비교할 때 차이가 있다.

bitmap : 작은 점으로 이미지를 표현. 확대하면 계단 효과 등 깨짐 발생 -> png 

vector : 이미지를 선과 점의 연결로 표현. 확대해도 깨짐 발생 X -> svg

 

2. SVG / PNG 파일 다운받아서 CSS에 불러 오기

1. SVG / PNG 이미지 다운받기:

thenounproject.com/ 여기서 이미지 아이콘 무료 다운로드 가능!

2. <img> 태그를 사용해서 나타낸다. 확장자만 다르다.

<img src="파일이름.svg" alt=""> 

<!doctype HTML>
<html>
<head>
   <meta charset="utf-8">
    <style>
        img{
            width:200px ; margin : 20px ;
        }
    </style>
</head>
<body>
    <h1>SVG:Vector</h1>
    <img src="people1.svg" alt="five of us">
    <h1>PNG:Bitmap</h1>
    <img src="people2.png" alt="five of us">
</body>
</html>

 

전혀 차이 없는 두 개의 이미지가 만들어지지만, 확대를 한다면 PNG 파일만 깨짐이 발생한다.

 

 

 

 

 

 

 

 

 

 

+ SVG / PNG 파일의 장점

: background에서 color과 image가 충돌하지 않는다.

<!doctype HTML>
<html>
<head>
    <style>
        body{
            background-image : url('people1.svg') ;
            height : 300px ;
            background-size : contain ; 
            background-color : lightgreen ;
            background-repeat : repeat ;
            }
    </style>
</head>
<body>
</body>
</html>

 

3. SVG 이미지 직접 만들기

1. 기존 SVG 파일을 bracket 등 html editor에 나타내보면 <svg> 태그가 있는데, 이를 그대로 복사한다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 64 80" enable-background="new 0 0 64 64" xml:space="preserve">
	</svg>

<svg> 와 </svg> 태그 사이에 있는 코드가 SVG 이미지가 될 것이다.

해당 코드에는 복잡한 요소가 많은데, 다 지우고 width와 height 속성만으로도 svg 이미지를 나타낼 수 있다.

<svg width="210" height="210">
    <rect x="5" y="5" width="200" height="200" style="stroke:red ; fill:blue ; stroke-width:10px"></rect>
    </svg>

각 svg 태그 안 코드의 의미:

<svg width="210" height="210"> </svg>

: svg 이미지의 너비=210, 높이=210

(여기서는 이미지의 '총 영역'을 의미. 사각형의 너비/높이와 무관.)
<rect> </rect> : rectangular. 직사각형을 만드는 태그.
x="5" y="5" : 직사각형의 시작점을 의미. 좌상단 위치의 점이 (0,0) 이라면, 이 위치에서 오른쪽으로 5칸, 아래로 5칸 떨어진 점에서 시작한다는 의미.
width="200" height="200" : 사각형의 너비=200, 높이=200 이라는 의미. '사각형 실제'의 너비/높이 의미.
style="stroke : red ; fill : blue ; stroke-width : 10px" : stroke는 테두리나 영역, fill은 채운다는 의미, stroke-width는 테두리의 두께.

+ 유용한 사이트 소개

1) SVG를 심화학습하고 싶다면?

tutorials.jenkov.com/svg/index.html

 

SVG Tutorial

This tutorial series goes through the majority of SVG's (Scalable Vector Graphics) features.

tutorials.jenkov.com

2) SVG를 배워서 어디다 쓰는지 알고 싶다면?

codepen.io/search/pens?   여기에서 'SVG' 검색하기

 

CodePen Search

 

codepen.io

오랜 Project : Bracket 에서 디렉토리 외부의 이미지파일을 img태그로 불러오는 방법

 

모션그래픽

: CSS 코드로 그래픽/애니메이션 작업을 하는 방법

(물론 전문적 작업을 위해서 포토샵 등 다양한 tool을 쓰는 것도 좋음)

* transform 속성은 이 속성이 적용되는 element의 display 상태가 block 또는 inline-block 일 때만 적용된다.

 

transition

1) transition 이란?

: 효과를 부드럽게 적용할 수 있는 속성.

이 속성만 적용해도 간단한 변환 효과를 애니메이션처럼 보이게 할 수 있다.

ex) 어떤 효과를 1초간 적용 -> 해당 효과가 연속상으로 이어지는 것 처럼 보임

<!doctype HTML>
<html>
<head>
    <style>
        a{
            font-size:3rem ; 
            display:inline-block ; 
            transition:property : all ; 
            transition-duration : 1s ;
        }
        a:hover{
            transform:translate(20px, 20px) ;
            font-size : 2rem
            color : lightgreen ;
        }
    </style>
</head>
<body>
    <a href="#">Click</a>
</body>
</html>

효과 적용 전.
효과 적용됨. 미묘하게 이동했다.

 

+ <a href="#"> : 해당 a 링크/태그를 클릭해도 어떤 웹사이트로 이동하지 않게 함.

2) transition 세부사항

developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions 여기에 자세한 설명있음!

1. transition-property

: 어떤 element, 요소에 transition 효과를 적용할지

2. transition-duration

: transition 효과를 얼마(초/분)동안 지정할지

3. transition-delay

: transition 효과를 얼마(초/분) 후 부터 나타나게 할지

4. transition-timing-function

: www.w3schools.com/cssref/css3_pr_transition-timing-function.asp 에 세부설명 있음.

ex) ease-in : 초반에 느린 transition 효과 적용 / ease-out : 후반에 느린 transition 효과 적용

step(n, start/end) : transition 효과를 초반/후반에 n단계로 적용

5. transition : 위 모든 속성들을 한 번에 나타내기

적용할 element {

   property(적용대상)  duration(적용시간)  delay(지연시간)  timing-function(함수효과적용)

}

 

**transition 효과를 사용해서 작은 효과를 구현해 봄.

<!doctype HTML>
<html>
<head>
    <style>
        .rainbow{
            margin : 10px ; width : 100% ; justify-content : center ; height : 100px ; font-size : 2rem ; font-weight : bold ;
            align-items : stretch ;
            display : flex ;
            transition : all 2s ;
            
        }
        #one:hover{height : 50px ; background-color : red ; font-size : 3rem }
        #two:hover{height : 100px ; background-color : orange ; font-size : 3rem}
        #three:hover{height : 150px ; background-color : yellow ; font-size : 3rem }
        #four:hover{height : 200px ; background-color : lawngreen ; font-size : 3rem }
        #five:hover{height : 250px ; background-color : lightcyan ; font-size : 3rem }
        #six:hover{height : 300px ; background-color : deepskyblue ; font-size : 3rem }
        #seven:hover{height : 350px ; background-color : mediumpurple ; font-size : 3rem }
    </style>
</head>
<body>
    <div class="rainbow">
        <div id="one" class="rainbow">Red</div>
        <div id="two" class="rainbow">Orange</div>
        <div id="three" class="rainbow">Yellow</div>
        <div id="four" class="rainbow">Green</div>
        <div id="five" class="rainbow">Skyblue</div>
        <div id="six" class="rainbow">Navy</div>
        <div id="seven" class="rainbow">Purple</div>
    </div>
</body>
</html>

 

유지보수

1. link & import

좋은 코드를 만드는 방법 중 하나 : 중복을 제거하는 것!

중복을 제거하면서 코드를 효율적으로 수정할 수 있는 방법이 link 와 import 이다.

사용하는 방법

여러 개의 웹페이지의 디자인/스타일에서 겹치는 코드만 복사해서 새 페이지에 복사한다.

후에 이 디자인 서식을 사용한다면 이 새 페이지에서 끌어와서 사용할 것이다.

* 이때, 디자인서식이 들어있는 새 페이지의 확장자는 .css 이다!

/*  스타일 적용하는 파일  */
h1{
    background-color : black ; color : limegreen ;
    transition : all 1s ;
}
h1:hover{
    background-color : white ; color : orangered ; text-align : right ;
}
<!-- 1페이지 -->
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="index1.css">    
</head>
<body>
    <h1>page1</h1>
</body>
</html>

<!-- 2페이지 -->
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="index1.css">
</head>
<body>
    <h1>page2</h1>
</body>
</html>

2가지의 방법

어떤 양식으로 코드를 끌어오는지에 따라서, 방법이 두 가지로 나뉜다: (결과는 같다)

2-1) link

: HTML 태그를 사용할 때. <head> 태그 안에 사용한다.

<head>
    <link rel="stylesheet" href="index1.css">    
</head>

2-2) import

: style 태그 안에 사용할 때. css 형식을 따를 때. <head> 태그 안 <style> 태그 안에 사용한다.

    <style>
        @import url('index1.css')
    </style>

 

'front-side > CSS' 카테고리의 다른 글

Semantic UI : 소개 ~ js가 필요한 컴포넌트의 사용법  (0) 2021.05.31
10. 코드 경량화(minify) ~ CSS 뛰어넘기(preprocessor)  (0) 2021.05.18
8. 그래픽  (0) 2021.04.12
7. 레이아웃  (0) 2021.04.07
6. 레이아웃 추가(심화)내용  (0) 2021.04.05

1. 배경(background)

1) 배경의 세부 속성들(순서대로)

1. background-color : 색깔

2. background-image : 특정 이미지를 배경에 적용할 때.

   background-image : url("이미지 경로.확장자")

3. background-repeat : 배경 이미지의 경우, 바둑판식으로 반복될지를 결정하는 속성

   1. : no-repeat : 이미지 반복 안 함

   2. : repeat-x : 가로 방향으로만 반복나열

   3. : repeat-y : 세로 방향으로만 반복나열

   4. : repeat[기본값] : 가로 세로 반복(바둑판식)

4. background-attachment : 배경이미지가 화면에 어떻게 붙어 있을지를 결정함

   1. scroll[기본값] : 화면 스크롤하면 배경 영역과 같이 배경이미지도 이동

   2. fixed : 화면 스크롤하면 배경 영역은 움직이지만 배경 이미지는 고정

5. background-position : 배경이미지가 화면에서 어디에 위치할지를 지정

   여러 값이 있으나, left top / left bottom / center 등으로 많이 표현됨.

6. background-size : 배경이미지가 화면에서 얼마만큼의 영역을 차지할지를 지정.

   1. cover[기본값] : 배경이미지가 배경화면을 다 덮음. 가로/세로가 맞지 않을 경우, 일부가 삐져나올 수 있음.

   2. contain : 배경이미지가 배경화면을 벗어나지 않음. 가로/세로가 맞지 않으면 일부 공간이 빌 수 있음.

2) 간단하게 나타내는 방법

border와 비슷하다.

background : color image repeat attachment position size   순서대로 나열!

 

* color와 image는 둘 다 나타낼 수 있다. 다만 image가 color보다 앞에 적용되므로, image가 불투명하다면 color를 가릴 수 있다.

 

2. 필터(filter)

이미지와 텍스트 등 element에 '효과'를 적용하는 것.

css-playground.com/  에서 다양한 필터 효과를 직접 적용해볼 수 있음!

 

CSS Playground

Learn and play around with CSS using sliders. Create and share CSS Playgrounds which combine the best of a HTML/CSS playground with interactive CSS widgets.

css-playground.com

1) 필터 적용하기 : 간단한 버전

적용할 element { filter : 적용할 필터(세부사항) }

2) 간단한 필터 예시

1. blur : 이미지/텍스트를 흐리게 만들어주는 필터

blur ( px 단위 ) 로 입력. px이 클수록 blur 효과가 커짐.

2. grayscale : 이미지를 흑백으로 만들어주는 필터

grayscale ( 0% ~ 100% 사이 단위 ) 로 입력. 100%이면 완전 흑백.

* 여러 필터를 동시에 적용할 수 있다!

  <head>
    <style>
        img:hover{
            filter: grayscale(50%) ;
            filter: blur(10px)
        }
    </style>
  </head>
  <body>
      <img src="C:\Users\USER\Desktop\WEB\image\facebook.jpg" width=100%>
  </body>

grayscale, blur 효과가 동시에 적용된 그림

* 효과 부드럽게 적용시키기

transition : 적용대상 적용시간

transition : all 1s ;  <!-- 모든 대상에 대해서, 1초동안 해당 효과를 천천히 적용시킴 -->

3) 기타 필터 적용해보기

위 링크의 메인 홈페이지에서 아무거나 랜덤 게시물을 눌러보았다. 이런 식으로 화면이 나온다.

여기서 css-playground.com/view/224/hours-by-columns 의 게시물의 코드를 사용해서, 모바일 형식으로 된 원본 코드를 조금 변형해서 여행 플래너 형식으로 코드를 구성해 보았다.

<html>
<body>
    <div class="ground">
        <div class="mobile">
           <div class="main-frame">
            <div class="year">
               <div class="year-title">
                   2021
               </div>
               <div class="week-title">
                        Singapore
                    </div>
                <div class="week">
                    <div class="week-day">
                        <div class="day">
                            <div class="day-title">
                                <div class="first-level">
                                    <div class="day-number">
                                        1
                                    </div>
                                    <div class="second-level">
                                        <div class="day-month">
                                            April
                                        </div>
                                        <div class="day-name">
                                            Universal <br> Studio
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hours-box">
                                <div class="hours">
                                    <div class="hour">09:00</div>
                                    <div class="list">Global Station</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">12:00</div>
                                    <div class="list">Lunch at Marvel's</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">19:30</div>
                                    <div class="list">Firework Festival</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="week-day">
                        <div class="day">
                            <div class="day-title">
                                <div class="first-level">
                                    <div class="day-number">
                                        3
                                    </div>
                                    <div class="second-level">
                                        <div class="day-month">
                                            April
                                        </div>
                                        <div class="day-name">
                                            Merlion <br> Park
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hours-box">
                                <div class="hours">
                                    <div class="hour">08:00</div>
                                    <div class="list">Breakfast Buffet</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">12:00</div>
                                    <div class="list">Busking</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">17:00</div>
                                    <div class="list">Watch Sunset</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">19:00</div>
                                    <div class="list">Sightseeing</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="week-day">
                        <div class="day">
                            <div class="day-title">
                                <div class="first-level">
                                    <div class="day-number">
                                        4
                                    </div>
                                    <div class="second-level">
                                        <div class="day-month">
                                            April
                                        </div>
                                        <div class="day-name">
                                            Gardens <br> by the Bay
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hours-box">
                                <div class="hours">
                                    <div class="hour">08:00</div>
                                    <div class="list">Photo at waterfall</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">12:00</div>
                                    <div class="list">Ferris Wheel</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">14:00</div>
                                    <div class="list">Bird Show</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">16:00</div>
                                    <div class="list">Picnic</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="week-title">
                        Japan
                    </div>
                <div class="week">
                    <div class="week-day">
                        <div class="day">
                            <div class="day-title">
                                <div class="first-level">
                                    <div class="day-number">
                                        8
                                    </div>
                                    <div class="second-level">
                                        <div class="day-month">
                                            April
                                        </div>
                                        <div class="day-name">
                                            Tokyo
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hours-box">
                                <div class="hours">
                                    <div class="hour">09:00</div>
                                    <div class="list">Ichiran Ramen</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">11:00</div>
                                    <div class="list">Shopping</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">14:00</div>
                                    <div class="list">Spa</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="week-day">
                        <div class="day">
                            <div class="day-title">
                                <div class="first-level">
                                    <div class="day-number">
                                        9
                                    </div>
                                    <div class="second-level">
                                        <div class="day-month">
                                            April
                                        </div>
                                        <div class="day-name">
                                            Tokyo
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hours-box">
                                <div class="hours">
                                    <div class="hour">12:00</div>
                                    <div class="list">Eat Sushi</div>
                                </div>
                                <div class="hours">
                                    <div class="hour">19:00</div>
                                    <div class="list">Sightseeing</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</body>
</html>

바꾼 요소들:

1. 화면 크기를 위해서 mobile과 main frame의 width와 height을 대폭 늘려서 지정하였다.

2. 기존 양식은 날짜와 시간만 있고 '할 일' 영역은 없었는데, 여기에 '할 일' 영역을 추가하였다.

여기서 flex 형식이 많이 사용되어서 주의해야 했다. 가령 컨텐츠는 나라를 기준으로는 column으로 정렬되지만, 그 안에서의 날짜를 기준으로는 row로 정렬되고, 또 하루 날짜 안에서의 시간과 할 일은 column으로 정렬되지만, 그 안의 시간과 할 일은 row로 정렬되었다. 

3. flex 형식을 지정할 때는 지정할 단위에서 '가장 바깥에 있는 element'에다 지정해야 하는데, 이를 찾는 것이 조금 까다로웠다.

=> CSS 구조가 복잡할 시 레이아웃 맵을 그려놓거나, 배경색으로 각 div 요소의 영역과 포함관계를 뚜렷이 구분하면서 작업하면 덜 헷갈릴 것이다.

 

아쉬웠던 점:

아직 JavaScript 등을 모르다 보니, 해당 글은 코드에 직접 작성한 것이다. 그래서 코드가 불필요하게 길어지고, 어디에 입력할지를 정확히 찾기 어려웠다. 스크립트 언어를 배워서 편하게 작성할 수 있다면 더 좋을 것 같다.

3. 혼합(blend)

: 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법!

어떤 이미지를 혼합하느냐에 따라서, 두 가지 모드가 있다. 

1. background-blend-mode : 배경 이미지끼리 혼합

여기서의 배경 이미지 두 개: background-color & background-image

<!doctype HTML>
<html>
<head>
    <style>
        .blend{
            height:500px ; background-color : lightgreen ; border: 5px solid black ; background-size : cover ;
            background-image : url('html.jpg') ; background-blend-mode:color ;
        }
    </style>
</head>
<body>
    <div class="blend"></div>
</body>
</html>

이런 식으로 기존의 이미지와 색깔이 합쳐져서 나온다.

background-blend-mode 를 설정해야만 blend 효과를 볼 수 있고, 아니라면 이미지가 색상보다 우선한다!

 

background-blend-mode 의 여러 value

: www.w3schools.com/cssref/pr_background-blend-mode.asp여기서 더 자세히 알 수 있다.

color, color-burn, color-dodge, darken, difference ... 등 다양한 value가 있다!

color-burn이나 color-dodge는 기본색과 배경 '색깔'의 색으로만 이미지를 만드는 것 같고, difference는 보색효과와 유사한 느낌이다.

 

2. mix-blend-mode : 배경 이미지와 텍스트끼리 혼합

꼭 텍스트와 이미지를 혼합해야 하는 것은 아니다. developer.mozilla.org/ko/docs/Web/CSS/mix-blend-mode 에서는 여러 class를 지정하고 각 class에 원을 할당해서 mix-blend-mode 를 사용한 예시를 보여준다.

 

그리고 과정이 좀 까다로웠는데, <생활코딩> 강의의 방식을 그대로 따라해야만 적용이 되었다... 

1) 아래처럼 body 태그 전체에 background-image를 적용하면 mix-blend-mode 효과가 나타난다.

<!doctype HTML>
<html>
<head>
    <style>
        body{
            background-image : url('netflix.jpg') ; background-size : contain ;
        }
        .blend{
            font-size : 2rem ; 
            color : limegreen ; 
            font-weight : bold ; 
            mix-blend-mode : screen ; 
        }
    </style>
</head>
<body>
    <div class="blend">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, autem.</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officia tenetur alias corporis voluptatum molestias molestiae, autem fugiat asperiores architecto nobis! Vero perspiciatis quisquam atque, deleniti, nostrum obcaecati tenetur animi dolorem iusto officia, eos praesentium veniam, voluptatibus? Officiis, hic molestiae! Illo, nam, exercitationem. Numquam tempora tenetur odit ducimus alias, obcaecati voluptate soluta temporibus omnis quasi, nemo, reprehenderit minus at recusandae.</p>
    </div>
</body>
</html>

2) 그러나 background-image를 <div>태그의 class 에 적용하면 이 효과가 나타나지 않는다.

<style>
        .blend{
            background-image : url('netflix.jpg') ; background-size : contain ;
            font-size : 2rem ; 
            color : limegreen ; 
            font-weight : bold ; 
            mix-blend-mode : screen ; 
        }
    </style>

위 이미지와 텍스트 컬러가 다르다. blend되지 않고 텍스트와 이미지가 개별적으로 존재하는 모습이다.

3) 방법을 알아냈다.

-> body 태그에 적용하면 되고 개별 class에 적용하면 안 되었던 이유는 포함관계 때문인 것 같다.

body태그가 class보다 큰/포괄적인 개념이므로, 포괄적인 body 태그에 이미지를 먼저 적용하고, 그 안의 div class에 텍스트를 적으면 가능했지만, level이 같고 동일한 class에 background-image와 텍스트 속성을 둘 다 적용해버리면 되지 않았던 것이다.

=> 바깥의 태그/element에 background-image 를 적용시키고, 더 안쪽의 element에 텍스트와 background 속성을 적용하면 문제없이 적용된다. 이렇게!

<style>
        .blend1{
            background-image : url('netflix.jpg') ; background-size : contain ;
        }
        .blend2{
            font-size : 2rem ; 
            color : limegreen ; 
            font-weight : bold ; 
            mix-blend-mode : screen ; 
        }
    </style>
</head>
<body>
    <div class="blend1">
        <div class="blend2">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, autem.</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officia tenetur alias corporis voluptatum molestias molestiae, autem fugiat asperiores architecto nobis! Vero perspiciatis quisquam atque, deleniti, nostrum obcaecati tenetur animi dolorem iusto officia, eos praesentium veniam, voluptatibus? Officiis, hic molestiae! Illo, nam, exercitationem. Numquam tempora tenetur odit ducimus alias, obcaecati voluptate soluta temporibus omnis quasi, nemo, reprehenderit minus at recusandae.</p>
        </div>
    </div>
</body>
</html>

4. 변형(transform)

element의 크기, 위치, 모양 등을 변경하는 속성!

여러 효과를 섞어서 사용할 수 있다.

transform : 효과이름 (세부사항) 

rotate , scale , translate , transform , skew 등 여러 종류가 있다.

1) scale : element의 확대/축소

scale을 적용할 방향(x,y축)과, 숫자로 확대/축소 비율을 지정할 수 있다.

2) rotate : element의 회전

3) translate : element를 지정 방향으로 움직임

4) skew : element를 늘임/줄임으로 왜곡

5) origin : element의 origin(기준점)을 설정하고, 이를 기준으로 1)~4) 의 효과를 적용가능

6) matrix : element에 더 다양한 효과를 줄 수 있는 옵션이지만, matrix(행렬) 개념을 알고 있어야 함.

 

그런데 효과가 잘 적용되지 않는다.... 다른 문제가 있는 것 같은데 나중에 원인을 찾아봐야겠다.

+ transform 효과로 문 닫기 & matrix 속성으로 다양한 효과 적용해보기가 목표.

 

CSS transform library 라고 검색:

elrumordelaluz.github.io/csshake/#1 이런 라이브러리에서 다양한 CSS transform 효과를 체험할 수 있다!

'front-side > CSS' 카테고리의 다른 글

10. 코드 경량화(minify) ~ CSS 뛰어넘기(preprocessor)  (0) 2021.05.18
9. 그래픽 fin ~ 유지보수-link와 import  (0) 2021.04.13
7. 레이아웃  (0) 2021.04.07
6. 레이아웃 추가(심화)내용  (0) 2021.04.05
5. brackets ~ 레이아웃 기초 내용  (0) 2021.04.02

1. flex의 기타 속성들 정리

: 모든 내용은 Flexbox playground (codepen.io)를 참고했다.

[1] 전체 element에 적용되는 속성

1) flex-wrap

flex의 기본 설정 : 같은 row/column에 배정된 컨텐츠의 총 너비/높이의 합이 컨테이너 전체의 너비/높이의 합보다 크다면(높이가 지정된 경우), flex-direction 이 설정된 경우 그냥 한 row/column에 컨텐츠를 나타낸다.

 

flex-wrap에는 3가지 값이 있다

1. flex-wrap : nowrap => 기본값.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>EXAMPLE</title>
    <style>
        body{
            width:500px <!-- content 전체의 너비 지정 -->
        }
        .content{
            display:flex ; 
            flex-direction : row ; 
            flex-wrap : nowrap
        }
        header{
            border-bottom: 5px solid gray ; text-align : center ;
        }
        footer{
            border-top : 5px solid gray ; text-align : center ;
        }
        nav{
            border-right: 5px solid gray ; width:200px ; color : hotpink
        }
        aside{
            border-left : 5px solid gray ; width:200px ; color : orange
        }
        main{
           width:200px ; color : deepskyblue
        } <!-- main+nav+aside 너비를 하면 body에서 지정한 너비보다 큼! -->
    </style>
  </head>
  <body>
          <header>Lorem ipsum dolor sit amet.</header>
          <div class="content">
              <nav>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, eveniet. </nav>
              <main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sint quod repellendus a inventore ullam quidem cupiditate iure dolor in! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsum possimus voluptates, ipsam exercitationem assumenda labore est voluptate commodi, voluptas! </main>
              <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, quidem. </aside>
          </div>
          <footer>Lorem ipsum dolor sit amet.</footer>
  </body>
</html>

일반적 레이아웃

2. flex-wrap : wrap => 너비/높이가 초과된 컨텐츠부터 아래 row/ 오른쪽 column에 배치

flex-wrap : wrap

3. flex-wrap : wrap-reverse => 너비/높이가 초과된 컨텐츠부터 위 row / 왼쪽 column에 배치

flex-wrap : wrap-reverse

2) align-items

: 같은 row/column에 있는 컨텐츠들을 어떻게 배치할지를 결정. 

flex-direction : row 인 경우 컨텐츠들의 상하정렬 , 

flex-direction : column 인 경우 컨텐츠들의 좌우정렬을 결정.

5가지 값을 가짐:

1. align-items : stretch

=> 기본값. 컨텐츠들의 너비/높이가 컨테이너에 지정된 너비/높이만큼 늘어남

2. align-items : flex-start

=> 컨텐츠들의 내용이 컨테이너의 맨 위/왼쪽부터 시작하고, 컨텐츠의 양에 따라 너비/길이가 달라짐

3. align-items : flex-end

=> 컨텐츠들의 내용이 컨테이너의 맨 아래/오른쪽부터 시작하고, 양에 따라 끝나는 지점이 달라짐

4. align-items : center

=> 컨텐츠들이 중앙에 배치됨.

5. align-items : baseline

=> 컨텐츠들이 끝나는 부분이 일직선상에 맞춰지도록 컨텐츠가 배치됨.

 

3) justify-content

: 같은 row / column에 있는 컨텐츠들을 어떻게 배치할지를 결정.

* 다만 align-items 와 담당하는 정렬 방향이 다름!

flex-direction : row 인 경우 컨텐츠들의 좌우정렬 ,

flex-direction : column 인 경우 컨텐츠들의 상하정렬을 결정.

 

4) align-content

align-content - CSS: Cascading Style Sheets | MDN (mozilla.org) 여기서 보충설명 참고함.

* align-items 와의 차이? 

align-content : 본문 요소들이 많아서 multi columns/rows 상태일 때 적용된다.

align-items : 같은 row/column 안의 본문 요소들에게만 적용된다.

 

[2] 개별 element에 적용되는 속성

1) align-self

: align-items 의 개별 버전.

한 row/column의 item을 모두 한 방향으로 정렬했지만 일부 element만 다른 정렬 방식을 적용하고 싶을 때 사용.

align-items 에 쓰인 값들을 사용할 수 있다.

        #ending{
            display:flex ; align-self:flex-end ; color:forestgreen ;
        }
        <div id="ending">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus quasi impedit, rem consequuntur odio nulla recusandae officiis. Error voluptate aut maiores voluptates, iusto aspernatur, hic mollitia, dolorum, at sint repellendus!</div>

초록색 문단만 끝에서부터 시작함!

2) flex 축약형 버전

: border의 여러 속성들을 한 번에 나열하는 것처럼(ex. border: 1px solid gray), flex도 가능하다.

1. 형식

적용할 element {flex-shrink flex-grow flex-basis}

* flex-grow , flex-shrink 는 정수, flex-basis는 100%가 최대인 % 단위

.content:nth-child(2){
	display:flex ;
    flex: 1 0 50%
}

3) order

flex element 사이에 보여질/배치될 순서를 지정할 수 있다.

보통은 입력된 순서대로 보여지는 것이 일반적이지만, 그렇지 않을 경우에 주로 사용한다.

ex) 검색엔진에서는 앞에 나오는 내용이 더 검색 순위에 중요하게 작용하는 경우가 많은데, 이를 대비해서 <main> 태그 안의 내용을 앞에다 입력하고 싶다. 그런데 디스플레이 상으로는 <nav>와 <aside> 사이에 보이게 하고 싶을 때.

* order 는 정수 단위로 가능. order 를 따로 제시하지 않는다면 가장 먼저 제시되는 element의 order는 0이다.

* order 값이 작을수록(음수도 가능) 먼저 배치된다.

<!DOCTYPE html>
<html>
  <head>
    <style>
        .container{display:flex ; flex-direction:column ; text-align:center;}
        .content{display:flex ; flex-direction:row}
        nav{border-right : 5px solid gray ; padding:20px ; flex-basis:200px ;
            order:0}
        main{order:1}
        header{ border-bottom : 5px solid gray ;}
        aside{border-left : 5px solid gray ; padding:20px ; flex-basis:200px ;
            order:2}
        footer{border-top : 5px solid gray}
    </style>
  </head>
    <body>
      <div class="container">
          <header><h1>KSY</h1></header>
          <div class="content">
              <main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum delectus repellat nihil, facere quasi cupiditate natus, dolore itaque cumque magni assumenda molestiae perferendis excepturi soluta pariatur tenetur voluptatum fugiat porro fugit dolores, vel eveniet nobis! Hic eligendi temporibus, at aspernatur accusantium necessitatibus, corporis explicabo adipisci in tempora numquam consectetur beatae eos dolorem totam magnam voluptates cupiditate autem a nulla repudiandae enim. Obcaecati atque quae rerum dicta maxime adipisci accusamus, saepe pariatur, similique, nesciunt repellat! Perspiciatis dolor, quam sint eos optio fugiat tenetur modi magni cupiditate. Esse, repellendus, eaque impedit hic incidunt cum nisi omnis perferendis labore nostrum earum!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fuga, magnam voluptatem possimus soluta qui aliquid recusandae sunt repudiandae, ipsa labore laboriosam dicta! Fugiat delectus quo aliquid distinctio at eligendi accusantium esse iure, quis qui inventore voluptates porro enim, saepe, eaque, praesentium! Ducimus recusandae ex aliquam quisquam numquam possimus fugit sit, nihil, culpa vitae optio laudantium voluptatem. Suscipit sint vitae architecto, amet eligendi, modi at vel, maxime veritatis sapiente sequi! Dolorem nesciunt ipsa tempore quibusdam similique dolorum odit voluptatem reiciendis porro! Iste voluptatibus iusto ab, architecto, ipsum totam. Sapiente aliquid odit eos hic, atque laboriosam nemo eius reprehenderit! Pariatur, assumenda.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aspernatur, incidunt iste, sapiente rerum eum fugiat maxime neque praesentium, adipisci non. Doloremque recusandae, numquam aperiam non soluta illum ab, a voluptate necessitatibus porro nobis voluptatibus animi molestias alias accusantium deserunt consequatur molestiae vitae? Quam maxime distinctio minima molestias sequi laborum itaque ipsa, dolores facilis iure sed hic impedit perspiciatis, quos. Hic reiciendis eligendi cumque sunt dolorem harum, quo? Nostrum impedit dolorem et cupiditate ratione quaerat corporis ad tempora cum facere! Optio, magni iure natus consectetur est facilis maxime atque, ratione nisi qui vero voluptatem reprehenderit voluptas, minus provident omnis accusamus.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, natus tenetur voluptas minus tempore cupiditate. Totam architecto quaerat veniam consequuntur, praesentium assumenda, doloribus reiciendis qui ducimus, incidunt deleniti. Consectetur, molestias, dolorem! Enim obcaecati, necessitatibus ducimus quae a, praesentium harum nisi repellendus atque, doloremque quod ut ipsum, fugiat sit! Animi quos ratione id consequuntur ipsam unde et accusamus reprehenderit voluptatem velit, modi mollitia quasi ex, eum esse temporibus, cupiditate, quaerat rem facere eligendi pariatur iusto. Fugit error sed accusantium possimus totam id voluptate in cumque, quibusdam quidem? Laborum, consectetur nulla dolorum porro eos sed ab, sit illo molestias eaque alias distinctio!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis nostrum nobis excepturi quibusdam itaque. Mollitia consectetur error suscipit ipsam obcaecati consequatur, dignissimos autem! Adipisci itaque harum dignissimos numquam corporis quod tenetur omnis aliquid reprehenderit perferendis iure ut temporibus eveniet perspiciatis beatae, iste quia eum distinctio doloremque voluptatem fuga ipsum dolores ab. Temporibus at, nostrum ipsa libero, adipisci rem nam in quod unde beatae explicabo neque quisquam dicta enim a cumque optio est eos voluptate molestiae? Quo quaerat, impedit, quia asperiores molestiae, aspernatur delectus recusandae dolorem adipisci iste natus nisi illum alias nobis accusantium voluptate animi excepturi officiis error in.</p>
              </main>
              <nav><ol><li>HTML</li><li>CSS</li> <li>JavaScript</li></ol></nav>
              <aside><ul><li>A</li><li>B</li><li>C</li> <li>D</li></ul></aside></div>
          <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut.</footer> </div>
  </body>
</html>

body에서는 <nav> 태그보다 <main>태그의 내용이 앞에 제시되었지만, order 속성을 통해서 화면에는 nav 태그가 더 왼쪽에(먼저) 배치되었다.

 

2. media query : 어떤 조건에 따라 화면의 디자인을 다르게 하는 기술

1) media query 의 형식

* @media : media query가 시작함을 알려주는 역할

더보기
더보기

<style>

  @media (조건) {

  (조건이 맞을 때 수행할 디자인)

  }

</style>

    <style>
        @media (width:600px){
            body{
                background-color : red ;  <!-- 너비가 600px일 때 배경색을 빨강으로 지정 -->
            }
        }      
    </style>

보통은 특정 width가 되었을 때가 아니라, 특정 width 이상/이하일 때로 범위를 지정한다.

+ width, height 다 지정 가능

: max-width , min-width , max-height , min-height ... etc.

ex) max-width : 1000px => 최대 너비가 1000px일 때 = 너비가 1000px 이하일 때 서식 적용 

ex) min-height : 800px => 최소 높이가 800px일 때 = 높이가 800px 이상일 때 서식 적용

 

2) 우선순위

    <style>
        @media (max-width:600px){
            body{
                background-color : red ;   <!-- 조건1 -->
            }
        }
        @media (max-width:1200px){
            body{
                background-color : green ;  <!-- 조건2 -->
            }
        }        
    </style>

여러 개의 media 조건이 있고, 그 조건의 범위가 중첩될 경우, CSS에서는 우선순위에 따라 처리한다.

CSS는 구체적이고 세부적인 조건일수록 높은 우선순위를 가지고,

또한 복잡성/세부적인 정도가 같다면(같은 level이라면) 아래에, 나중에 작성된 조건이 우선순위가 높다!

그래서 이 경우, 의도는 ~600 : red , 601~1200 : green 이었지만, 막상 결과는 ~1200 : green 으로 적용된다.

=> 더 우선순위를 높이고 싶은 조건이 있다면, 그 조건을 동일 level에서 가장 아래에 배치해야 한다!

 

3) media query 응용

: flex와 media query를 적용해서, 모바일 환경에서의 디스플레이를 따로 지정해 보기.

나의 경우, 너비 600px을 기준으로 media query를 적용하였다.

<!DOCTYPE html>
<html>
  <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>EXAMPLE</title>
    <style>
        .container{
            display:flex ; flex-direction:column ; text-align:center;
        }
        .content{
            display:flex ; flex-direction:row
        }
        nav{
            border-right : 5px solid gray ; padding:20px ; flex-basis:200px ;
            background-color : darkorange
        }
        header{
            border-bottom : 5px solid gray ; background-color:lime
        }
        aside{
            border-left : 5px solid gray ; padding:20px ; flex-basis:200px ; 
            background-color : deeppink
        }
        footer{
            border-top : 5px solid gray
        }
        main{
            background-color : lightskyblue
        }
        @media (max-width:600px) {
            .container{
                    display:flex ; flex-direction:column ; text-align:center;
                    background-color : black
                }
            .content{
                display:flex ; flex-direction:column
            }
            nav{
                border-bottom : 5px solid gray ; padding:20px ; flex-basis:50px ;
                border-right : 0px ; color : darkorange ; background-color : black
            }
            header{
                border-bottom : 5px solid gray ; color:lime ; background-color : black
            }
            main{
                border-bottom : 5px solid gray ; color:lightskyblue ; background-color : black
            }
            aside{
                border-left : 0px ; flex-basis : 40px ; color : deeppink ; background-color : black
            }
            footer{color : white ; background-color : black}
        }
    </style>
  </head>
  <body>
      <div class="container">
          <header><h1>KSY</h1></header>
          <div class="content">
              <nav><ol><li>HTML</li>
              <li>CSS</li>
                  <li>JavaScript</li></ol></nav>
              <main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum delectus repellat nihil, facere quasi cupiditate natus, dolore itaque cumque magni assumenda molestiae perferendis excepturi soluta pariatur tenetur voluptatum fugiat porro fugit dolores, vel eveniet nobis! Hic eligendi temporibus, at aspernatur accusantium necessitatibus, corporis explicabo adipisci in tempora numquam consectetur beatae eos dolorem totam magnam voluptates cupiditate autem a nulla repudiandae enim. Obcaecati atque quae rerum dicta maxime adipisci accusamus, saepe pariatur, similique, nesciunt repellat! Perspiciatis dolor, quam sint eos optio fugiat tenetur modi magni cupiditate. Esse, repellendus, eaque impedit hic incidunt cum nisi omnis perferendis labore nostrum earum!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fuga, magnam voluptatem possimus soluta qui aliquid recusandae sunt repudiandae, ipsa labore laboriosam dicta! Fugiat delectus quo aliquid distinctio at eligendi accusantium esse iure, quis qui inventore voluptates porro enim, saepe, eaque, praesentium! Ducimus recusandae ex aliquam quisquam numquam possimus fugit sit, nihil, culpa vitae optio laudantium voluptatem. Suscipit sint vitae architecto, amet eligendi, modi at vel, maxime veritatis sapiente sequi! Dolorem nesciunt ipsa tempore quibusdam similique dolorum odit voluptatem reiciendis porro! Iste voluptatibus iusto ab, architecto, ipsum totam. Sapiente aliquid odit eos hic, atque laboriosam nemo eius reprehenderit! Pariatur, assumenda.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aspernatur, incidunt iste, sapiente rerum eum fugiat maxime neque praesentium, adipisci non. Doloremque recusandae, numquam aperiam non soluta illum ab, a voluptate necessitatibus porro nobis voluptatibus animi molestias alias accusantium deserunt consequatur molestiae vitae? Quam maxime distinctio minima molestias sequi laborum itaque ipsa, dolores facilis iure sed hic impedit perspiciatis, quos. Hic reiciendis eligendi cumque sunt dolorem harum, quo? Nostrum impedit dolorem et cupiditate ratione quaerat corporis ad tempora cum facere! Optio, magni iure natus consectetur est facilis maxime atque, ratione nisi qui vero voluptatem reprehenderit voluptas, minus provident omnis accusamus.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, natus tenetur voluptas minus tempore cupiditate. Totam architecto quaerat veniam consequuntur, praesentium assumenda, doloribus reiciendis qui ducimus, incidunt deleniti. Consectetur, molestias, dolorem! Enim obcaecati, necessitatibus ducimus quae a, praesentium harum nisi repellendus atque, doloremque quod ut ipsum, fugiat sit! Animi quos ratione id consequuntur ipsam unde et accusamus reprehenderit voluptatem velit, modi mollitia quasi ex, eum esse temporibus, cupiditate, quaerat rem facere eligendi pariatur iusto. Fugit error sed accusantium possimus totam id voluptate in cumque, quibusdam quidem? Laborum, consectetur nulla dolorum porro eos sed ab, sit illo molestias eaque alias distinctio!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis nostrum nobis excepturi quibusdam itaque. Mollitia consectetur error suscipit ipsam obcaecati consequatur, dignissimos autem! Adipisci itaque harum dignissimos numquam corporis quod tenetur omnis aliquid reprehenderit perferendis iure ut temporibus eveniet perspiciatis beatae, iste quia eum distinctio doloremque voluptatem fuga ipsum dolores ab. Temporibus at, nostrum ipsa libero, adipisci rem nam in quod unde beatae explicabo neque quisquam dicta enim a cumque optio est eos voluptate molestiae? Quo quaerat, impedit, quia asperiores molestiae, aspernatur delectus recusandae dolorem adipisci iste natus nisi illum alias nobis accusantium voluptate animi excepturi officiis error in.</p>
              </main>
              <aside><ul><li>A</li>
              <li>B</li>
              <li>C</li>
                  <li>D</li></ul></aside>
          </div>
          <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut.</footer>
      </div>
  </body>
</html>

1. 좁은 화면(600px 미만)

2. 넓은 화면

너비가 좁을 경우는 display : flex ; flex-direction : column 으로 지정함으로써 모든 컨텐츠를 수직으로 배열하였다.

 

3. multi column

: 신문처럼 여러 개의 단(column)으로 구성된 배치를 하고 싶을 때 사용하는 방법/레이아웃.

1) 속성

1. column-count : column이 몇 개로 표시될지를 결정

- column의 개수를 유지하는 대신 너비는 전체 창 너비에 따라 달라진다.

2. column-width : 한 column의 width를 결정

- column의 너비를 유지하는 대신 개수는 전체 창 너비에 따라 달라진다.

3. column-gap : column과 column 사이의 간격을 결정

* column-count 와 column-width는 독립적이다!

    <style>
        .container{
            display:flex ; flex-direction:column ; text-align:center;
        }  
        .content{
            column-count:3
            column-width : 400px
        }
    </style>

이 경우, CSS에서는 column의 개수가 3개를 초과하지 않으면서 column의 너비가 400px보다 좁아지지 않도록 조절한다.

2) 우선순위

multi column에서는 기본값으로 column 구분이 제일 우선적이다.

column이 적용된 element 안에 있다면 기본 설정으로는 column 안에 갇혀서 그 규격을 따라야 한다.

<-> 만약 제목 등의 태그를 사용하는데 특정 태그/element가 column의 제약에 갇히지 않게 하고 싶다면?

column-span:all 

h2{column-span : all}

모든 h2 태그는 multi column의 제약에 갇히지 않고 column을 벗어나서 배치될 수 있다.

 

'front-side > CSS' 카테고리의 다른 글

9. 그래픽 fin ~ 유지보수-link와 import  (0) 2021.04.13
8. 그래픽  (0) 2021.04.12
6. 레이아웃 추가(심화)내용  (0) 2021.04.05
5. brackets ~ 레이아웃 기초 내용  (0) 2021.04.02
4. 타이포그래피-font ~ 조화  (0) 2021.04.01

+ Recent posts

티스토리툴바