ITWILL학원 : 3강 WEB(HTML, CSS) BY 김영희

테이블 칸 합치기

• colspan = “n” : 세로방향으로 합치는 속성
• rowspan = “n” : 가로방향으로 합치는 속성

칸합치는 속성은 항상 th나 td에서 이루어지지 tr에서는 절대 사용하지않는다!

rowspan을 생각할때는 빨래줄(tr)에 빨래(td나th)가 걸려있다고 생각하면 편하다
기준을 몇번째 tr인지 확인한 뒤 빨래줄에 빨래를 걸면 아래로 내려오듯이 td가 내려와있다고 생각하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table>
	<tr>
		<th colspan="2">칸 합치는 속성</th>
	</tr>
	<tr>
		<th>가로방향</th>
		<th>세로방향</th>
	</tr>
	<tr>
		<td>colspan="n"</td>
		<td>rowspan="n"</td>
	</tr>
	<tr>
		<td colspan="2">n개의 칸을 하나로 합치는 속성</td>
	</tr>
</table>

가로방향 합치기와 세로방향합치기가 동시에 나오는 예시는 아래와 같다
rowspan을 위에서 말했던 빨래감예시를 들어 설명해보면, 첫 번째 tr의 빨래줄의 마지막 td에 아래 빨래감이 3개가 걸려야한다.(즉 3칸을 합친다)
따라서 첫번째 tr의 두번째 td에 rowspan=”3”를 해준다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table>
    <tr>
        <td colspan="2">a</td>
        <td rowspan="3">b</td>
    </tr>
    <tr>
        <td>c</td>
        <td rowspan="2">d</td>
    </tr>
    <tr>
        <td>e</td>
    </tr>
    <tr>
        <td colspan="3">f</td>
    </tr>
</table>

파이썬 인강 자기계발 챌린지 19회차 미션

1. font-size

폰트 사이즈를 지정하는데 크게 가지방식이 있다.
직접 수치를 입력하는 방식과 상위요소 기준 상대적수치를 적용하는 방식 그리고 상속값을 적용하는 방식이다.

1
2
3
4
5

{
font-size : 15px; //직접 입력.
font-size : 1.5rem; //상위요소 기준 상대적 수치.
font-size : inherit; //상속값 위의 태그의 폰트사이즈를 그대로 받는다.
}

em과 rem의 차이?

css다루다보면 em과 rem을 접하게 된다.
나는 항상 px이나 %단위로 직접 수치를 입력하여 지정하였는데 em, rem을 사용하면 상대적인 수치가 자동적으로 정해져서 훨씬 디자인이 깔끔하고 통일성있어보이기도 한다.
그렇다면 em과 rem의 차이는 무엇일까?
둘 다 수치를 직접적으로 입력하는 방식이 아니다.

• em : 상위요소의 크기에 비례.
• rem : 최상위 요소의 크기 즉, html 요소 크기에 비례.
• 참고로 html 요소 크기의 기본값은 웹브라우저 설정에서 정한 크기이며 보통 16px이다.

결국 둘의 차이점은 최상위요소의 크기인지 상위요소의 크기인지의 차이다.
언뜻 읽으면 큰 차이가 없을 것 같지만 만약 em의 상위요소가 또 다른 상위요소에 상속을 받았다면 원하는 크기로 지정이 어려울 수 있다. 왜냐면 em은 상속의 영향을 받기 때문이다.

따라서 rem을 쓰는 것을 더 추천한다. 다만 rem을 쓰면 사용자가 커스터마이징해놓은 사이즈를 무시해버려서 사용자의 가독성을 오히려 떨어뜨릴수있다.

따라서 적절한 곳에 em과 rem을 쓰는 것이 좋다

그럼 언제 rem과 em을 써야할까?

참고링크 : 종합 안내: Rem 그리고 Em, 언제 써야 할까

• em 단위는 최상위 요소에 지정된 폰트 크기 말고, 다른 특정 요소의 폰트 크기에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• rem 단위는 em 단위를 쓸 필요가 없고, 또 브라우저의 폰트 크기 설정에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• 폰트 크기 지정을 비롯해서 꼭 em 단위를 써야 하는 곳이 아니라면 rem 단위를 사용하십시오.
• media queries에도 rem 단위를 쓰세요.
• 다중 칼럼 레이아웃의 너비에는 em 혹은 rem을 쓰진 마십시오 - 대신 %를 쓰세요.
• 만약에 크기가 변할 경우 해당 요소의 레이아웃이 깨지는 걸 막을 수 없다면 em과 rem 모두 쓰지 마세요.

2. font-family

폰트패밀리는 글꼴집합이다.
만약에 폰트를 하나를 지정했다고 생각해보자.
이용자가 해당 폰트가 없으면 폰트를 기본값으로 표시되어진다.

• serif는 바탕체계열
• Sans-serif는 고딕체계열
• Cursive는 필기체계열
• monospace는 가로 폭이 동일한 글꼴

아래는 폰트패밀리예시이다

1
2
3

{
font-family : Arial, Georgia, Times, "Times New Roman", serif
}

위에서 말했듯이 이용자의 컴퓨터에 지정한 폰트가 설정되어 있지 않으면 기본값으로 표시된다.
이러한 경우에는 아예 웹 폰트를 사용하면, 이용자의 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있다.

웹폰트 사용 방법은 html에서 link태그로 삽입하면된다.

1
2
3
4
5
6
7
8
9
10

<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Londrina+Outline|Open+Sans+Condensed:300" rel="stylesheet">

<style>
  #font1{
	font-family: 'Open Sans Condensed', sans-serif;
  }
  #font2{
	font-family: 'Indie Flower', cursive;
  }
</style>

참고링크 : 웹폰트 생활코딩

3. font 한꺼번에 적용

위에서 사용했던 폰트스타일이외에도 다양한 폰트스타일을 한 줄 코드로 작성할 수 있다
중요한 점은 아래 순서대로 작성해야 제대로 적용이 된다

1

font : 폰트스타일 폰트웨이트 폰트사이즈 폰트패밀리

적용된 예시는 아래와 같다
표시를 한 순서대로

• 1번에는 폰트스타일
• 2번에는 폰트웨이트
• 3번에는 폰트사이즈
• 4번에는 폰트패밀리

4. font color

폰트 컬러지정은 그냥 color적어주면 된다

• rgba(0,0,0) : 숫자가 작을수록 어두운 색을 띈다 = 검정색 = #000000
• rgba(255,255,255) : 숫자가 높을수록 밝은 색을 띈다 = 흰색 = #ffffff

폰트의 투명도도 조절할 수 있다.
rgba색상코드에서 마지막에 0에서 1사이의 숫자를 정해주면 된다

• 0 : 완전투명
• 0.5 : 절반만 투명
• 1 : 불투명

1
2

color : rgba(0,0,0, 0.5)
// 검정색컬러에 절반만 투명

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. Date객체

Date 객체의 특징

• 년,월,일 지정해서 객체를 사용
• 0부터 11까지를 1월부터 12월로 나타낸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//참고로 today는 2020년 6월 12일이다.
let today = new Date();
document.write(today+"<br>")

let day = new Date(2020,0,1); //month숫자를 0에서부터 세기때문에 1월1일은 0,1이 되어야함 
document.write(day+"<br>")

let day1 = new Date(2020,1,1); //2월1일
document.write(day1+"<br>")

let day2 = new Date(2020,0,1,11,30,5); //년,월,일,시,분,초 지정해서 객체사용가능
document.write(day2+"<br>")

let day3 = new Date(2020,0,1,11,61,5); //분에 61분을 적으면 자동으로 1시간이 올라감
document.write(day3+"<br>")

let day4 = new Date("2020/1/1") //년,월,일만 가능. 시분초불가. 월을 나타낼때 0부터가 아니라 1부터 시작
document.write(day4+"<br>") 

// 출력값 순서대로
Fri Jun 12 2020 11:14:44 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
Sat Feb 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 11:30:05 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 12:01:05 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 00:00:00 GMT+0900 (대한민국 표준시)

변수에 저장한 date객체를 가져와서 사용해보자
요일출력하는 getDay()의 경우 0(일)부터 6(토)까지를 나타낸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//참고로 today는 2020년 6월 12일이다.
let today = new Date();

document.write(today.getFullYear() +"<br>") //년출력 year말고 fullyear써야함
document.write(today.getMonth() +"<br>")  //월출력 (0부터 11까지)
document.write((today.getMonth()+1) +"<br>") //알아보기쉽게 1을 추가해서 사용
document.write(today.getDate() +"<br>") //일출력
document.write(today.getDay() +"<br>") //요일출력

// 출력값 순서대로
2020
5
6
12
5

숫자로 들어온 요일을 글자로는 어떻게 바꿀수있을까?
여러가지 방법이 있다

1. Array의 index 활용
   요일이 숫자로만 출력되어 아쉬운 경우에는 변수에 넣어 index를 이용하여 아래처럼 금요일 이렇게 출력되게 할수있다

1
2
3

let today = new Date();
let week = new Array('일', '월', '화', '수', '목', '금', '토')
document.write(week[today.getDay()] + "요일 <br>")

2. 제어문사용 (if나 switch)
   if나 switch를 통해 일일히 조건을 걸어 나열할수있다
   if는 많이 써보았으니 switch를 써보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function getToDay(day) {
	switch (day){
	case 0 : 
		document.write('일요일')
		break;
	case 1 : 
		document.write('월요일')
		break;
	case 2 : 
		document.write('화요일')
		break;
	case 3 : 
		document.write('수요일')
		break;
	case 4 : 
		document.write('목요일')
		break;
	case 5 : 
		document.write('금요일')
		break;
	case 6 : 
		document.write('토요일')
		break;
	}
}

getToDay(today.getDay())

2. 디데이 계산하는 함수 구하기

Date()객체를 활용하여 디데이를 계산한느 함수를 구해보자
Date()객체에서는 사칙연산이 적용되는데 단위가 밀리초로 출력된다

• 밀리초 = 1/1000초
• 1초 = 1000msc
• 1분 = 60 * 1000
• 1시간 = 60 * 60 * 1000
• 하루 = 24 * 60 * 60 * 1000

1
2
3
4
5
6
7
8
9
10

function calculator(year, month, day){
	let today = new Date();
	let lastday1 = new Date(year,(month-1),day) //컴터는 0월부터계산하니까 사용자입력값에서 1을 빼줌
	console.log(lastday1)
	let result =  (lastday1 - today) / (24 * 60 * 60 * 1000);
	document.write(Math.ceil(result) + "일 남았습니다 <br>")
}

calculator(2020,12,31); //202일 남았습니다
calculator(2020,06,14); //2일 남았습니다

ITWILL학원 : 7강 JS기초 BY 정규태강사

1. 무한반복문

반복문이 무한으로 실행되는 반복문.
문제의 해결이 언제 끝날지 모르는 경우에 주로 사용.

예를 들어,사용자가 정답을 맞출때까지 실행하는 퀴즈프로그램을 만들었다고 생각해보자
-> 사용자가 언제 정답을 맞출수있을지 알수있을까?
-> 모른다. 따라서 계속해서 실행을 하고 있어야한다
-> 이때 무한반복문 사용
-> 답을 맞추면 끝나야하기때문에 보조제어문이 필요하다

• 실제예시 : 스마트폰의 지문인식

1
2
3
4
5
6
7
8
9
10
11

for(;;){
 console.log("무한반복")
};

for(;true;){};

for(let i=1;;i++){};

while(true){};

do {} while(true);

2. 보조제어문

• break문 : 가장 가까운 반복문 하나를 탈출하는 코드다
  • 즉 이중for문이면 둘 다 탈출하는 것이 아니라 가장 가까운 for문만 탈출하는 것이다
  • break;의 순서에 따라 결과값이 달라지므로 위치가 중요하다
  • 예를 들어 : ~까지만 해라

1
2
3
4
5
6
7
8
9
10
11
12

for(let i=1; i<=10; i++){
	document.write(i+" ");
	if(i%4 === 0) break;
} //1 2 3 4

// break문은 순서가 중요하다
// 순서에 따라 값이 다르게 나오기 때문이다

for(let i=1; i<=10; i++){
	if(i%4 === 0) break;
	document.write(i+" ");
} //1 2 3

아래는 for문의 조건식으 true인 무한반복문이다
무한반복문과 함께 쓰이는 경우는 아래와 같다

1
2
3
4

for(let i=1;true;i++){
	if(i === 10) break;
	document.write(i+" ")
}

• continue문 : 해당 경우를 실행하지않고 다음 경우를 실행하는 동작
  • continue조건은 빼고 반복문을 실행하는 동작.
  • 예를 들어 : ~를 빼고 진행해라!할때 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let sum=0,i=0

while(i<5){
	i++
	if(i==3)
		continue;
		sum=sum+i
	document.write("i값은 " + i + " sum값은 " + sum + "<br>")
 }
/* i값은 1 sum값은 1
i값은 2 sum값은 3
i값은 4 sum값은 7
i값은 5 sum값은 12 */

document.write("while문의 결과값 : "+sum) // 12

위의 두가지를 활용한 숫자퀴즈를 만들어보자

1. 특정숫자 미리 지정 (1부터 100까지 중에서)
2. 사용자로부터 입력 -> 미리 지정한 숫자와 큰지, 작은지 같은 지를 비교
3. 큰 경우 -> “입력된 값이 큽니다” 출력
4. 같은경우 -> “정답입니다 도전횟수는 땡땡입니다” 출력
5. 작은 경우 -> “입력된 값이 작습니다” 출력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let quiz = Math.floor(Math.random()*100); //랜덤숫자만들기
console.log("랜덤숫자 정답은? "+ quiz)
let input = prompt('텔레파시를 보냈습니다~ 숫자를 입력하세요');

for(let count=1; true; count++){
	if(quiz > input){
		input = prompt("텔레파시숫자보다 작습니다. 숫자를 다시 입력해주세요");
	}else if(quiz < input){
		input = prompt("텔레파시숫자보다 큽니다. 숫자를 다시 입력해주세요");
	}else if(quiz == input){
		alert("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		document.write("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		break;
	}else{
		input = prompt("잘못입력하였습니다. 숫자를 다시 입력해주세요");
	}
}

강사님 코드는 아래와 같다
굳이 input을 for문 밖에 두는 것이 아니라 안에 두기만 하면 되는 거였다
괜히 일일히 input = prompt를 적었다… 띠용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let quiz = Math.floor(Math.random()*100);
console.log("랜덤숫자 정답은? "+ quiz)

for(let count=1; true; count++){
	let input = prompt('텔레파시를 보냈습니다~ 숫자를 입력하세요');

	if(quiz > input){
		alert("텔레파시숫자보다 작습니다. 숫자를 다시 입력해주세요. 시도횟수 " + count +"회");
	}else if(quiz < input){
		alert("텔레파시숫자보다 큽니다. 숫자를 다시 입력해주세요. 시도횟수 " + count +"회");
	}else if(quiz == input){
		alert("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		document.write("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		break;
	}else{
		alert("잘못입력하였습니다. 숫자를 다시 입력해주세요");
	}
}

3. Function 함수 : 일반, 익명

함수는 절차지향언어에서 사용되고 매서드는 객체지향언어에서 사용된다.
엄밀히 따지면 다른 개념이지만 크게 보면 동일하게 사용되기도 한다.
익명함수는 보통 변수에 넣어서 사용한다

• 변수 : 데이터를 저장해서 사용하는 곳
• 함수 : 실행문을 저장해서 사용하는 곳

1. 일반함수
   일반적으로 함수는 아래와 같이 선언과 사용한다.

1
2
3
4
5
6
7

//1. 일반함수 선언
fuction 함수명(매개변수){
	실행코드
}

//2. 일반함수 호출
함수명();

2. 익명함수
   익명함수의 선언과 사용은 아래와 같다.
   익명함수는 함수명이 없기때문에 변수이름으로 호출하면 된다.
   보통 익명함수는 1회성으로 주로 사용한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//1. 익명함수 선언
 변수 = fuction (매개변수){
	실행코드
}

//2. 익명함수 호출
변수명();

//3.예시

let fun1 = function (){
	document.write("하이")
}
fun1() //하이

4. 재귀함수

재귀함수란 다시 자기자신을 호출하는 함수이다.
재귀함수는 반복문없이 계속 반복된다 따라서 사용범위를 주의해서 사용해야한다
재귀함수는 일정크기만큼만 실행되고 자동적으로 멈춘다.

return을 이용해 함수를 탈출할수있다

1
2
3
4
5
6
7
8

//1. 재귀함수 선언
fuction 함수명(매개변수){
	실행코드;
	함수명(); //자신의 이름 또 호출
}

//2. 재귀함수 호출
함수명();

재귀함수를 활용하여 1~10까지 숫자를 나타내는 함수예제를 보자

1
2
3
4
5
6
7
8
9
10
11

let num=0;
function testFun(){
	if(num < 10){
		num++;
		document.write(num + " ")
		testFun();
	}else{
		return;
	}
}
// 1 2 3 4 5 6 7 8 9 10

강사님은 더 짧은 코드를 썼다
나는 왜 이 코드를 못했을까?

뭔가 더 간단해보인다.
무슨 코드가 더 좋은 코드일까?

가독성이 좋지만 긴 코드 vs 가독성이 조금 떨어지지만 짧은 코드

아직 잘 모르겠다. 아마 회사 분위기에 따라 다르지 않을까?

1
2
3
4
5
6
7
8
9
10

let num1 = 0;
function testFun2(){
	num1++;
	document.write(num1 + " ")
	if(num1 === 10){
		return;
	}
	testFun2();
}
// 1 2 3 4 5 6 7 8 9 10

5. 지역변수를 전역범위에서 쓰는 방법

지역변수를 전역변수처럼 쓸 수 있을까?
정답은 예스!
return을 이용한 예시를 보자

1
2
3
4
5
6
7
8
9

let number = 200;

function fun() {
	var number = 300;
	return number;
}

number = fun();
document.write(number) //300

number의 값은 200이 아니라 300이 나온다.
지역변수를 함수로 만들고 그 값을 전역변수 안에 넣었기 때문이다.

6. 내장함수

자바스크립트엔진에는 내장되어있는 함수들이 있다.

예시

• String(1)
• Number(“1”) => number는 정수와 실수를 합친 것으로 표현됨
• Boolean(0) =>
• alert(“경고창”)
• prompt(“질문”, “기본값”)
• confirm() => yes, no 결정
• parseInt() => 문자데이터를 정수데이터로 변경
• parseFloat() => 문자데이터를 실수데이터로 변경

ITWILL학원 : 6강 JAVA BY 윤미영강사

1. 리터럴(literal)

실제 값.
변수의 값이 변하지 않는 데이터(메모리 위치안의 값)이다.

참고링크 : 상수와 리터럴차이

2. byte + byte가 왜 에러날까

b1과 b2는 연산결과는 잘 나오지만 b3의 연산결과는 에러가 난다.

1
2
3
4
5
6
7

byte b1 = 10;
byte b2 = 20;
System.out.println(b1+b2); //30

byte b3 = b1+b2;
System.out.println(b3); //Type mismatch: cannot convert from int to byte

산술연산자는 기본적으로 int형이다. 그래서 type mismatch가 나타난다
int형으로 산술하면 잘~출력된다

1
2
3
4

int i1 = 100;
int i2 = 200;
int i3 = i1+i2;
System.out.println(i3); //300

3. int VS Integer

아래 데이터형의 차이점이 뭘까?

• int a; 기본데이터형
• Integer i; 참조데이터형
  • 라이브러리
  • 매서드사용가능

1
2
3
4
5
6

int a1 = 100;
Integer a2 = 100;

System.out.println(a2.toString()); //100
System.out.println(Integer.MAX_VALUE); //2147483647
System.out.println(Integer.MIN_VALUE); //-2147483648

4. void와 int차이

void와 int 매서드의 차이를 알아보자
public static 뒤에 void가 오기도하고 int등 다른 데이터타입이 올 수 있다.

• void의 의미 : myPrint가 가지고 있는 값이 없을때, 돌려줄값이 없을때 return이 없을때 사용.
• int의 의미 : 반대로 가지고있는 값이 있을때, 돌려줄값이 있을때. return과 함께 사용

1
2
3
4
5
6
7

public static void 매서드이름(매개변수){ //void 매서드 정의하기
	System.out.println("void 매서드")
}

public static int 매서드이름(int 변수명1, int 변수명2){ //int 매서드 정의하기
	return 변수명1 + 변수명2;
}

파이썬 인강 자기계발 챌린지 18회차 미션

HTML은 자주 공부했기때문에 약간 지루했지만…. 여전히 내가 몰랐던 내용이 있어서 해당 부분을 정리하고자한다.
알고있는 내용들은 이번 기회에 아예 외워버려야겠다.

1. 정의태그 dl, dt, dd 태그

어떠한 정의를 내리고 싶을 때 dl, dt, dd 태그를 사용한다.
자동으로 들여쓰기가 40px이 되어있다. 이때문에 들여쓰기의 거리를 조절하고 싶으면 text-indent나 margin-left, padding-left 속성값을 변경하면 된다.

• dl : definition list의 약자이다. 내부에 2개의 태그(dt, dd)를 포함하며 dt는 생략가능하지만 dd는 꼭 포함되어야한다.

• dt : definition term의 약자이며 정의하고싶은 용어의 제목을 나타낸다

• dd : definition description의 약자이며 용어의 내용을 나타내며 dl안에 필수로 들어가야한다.

1
2
3
4

<dl>
	<dt>정의하고싶은 용어의 제목</dt>
	<dd>정의할 내용</dd>
</dl>

아래 이미지는 왼쪽은 코드, 오른쪽은 그 코드출력값을 나타낸다.
1번 부분처럼 dl dt, dd를 단순하게 활용할 수 있다.

실제 포털사이트에서 이용하는 예시도 아래 링크에서 찾을 수 있다.
스크린리더이용자를 위해 dl dt dd태그를 남용해서는 안되겠다.
모두에게 공정한 정보를 제공할 수 있는 사이트를 만들고싶다.

참고링크 : dl dt dd 태그예시와 dl dt dd 태그를 남용하지마세요

2. code 태그

코드태그는 컴퓨터 코드(code)의 일부분을 나타내주는 코드이다. 그래서 컴퓨터나 프로그래밍코드일부를 그대로 표시하고자할때 유용하다.

1
2

<p>다음은 자바 코드의 일부분입니다. </p>
<code>System.out.println("헬로자바"); </code>

위의 이미지에서 2번부분을 보면 code태그안에서 html태그를 표현하고싶을때, 여전히 꺽쇠는 표현이 되지 않는다. 그래서 왼쪽꺽쇠(<)의 유니코드인 <를 사용했고
오른쪽꺽쇠인(>)의 유니코드인 >를 사용했다.

나는 마크다운으로 블로그를 작성하는데 항상 code표현을 백틱으로 이용해왔다. code태그 알아두면 html에서 유용하게 쓸 수 있다.

3. block요소와 inline요소 그리고 inline-block요소의 차이

• block 요소
  • 줄바꿈이 이루어진다.
  • 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다.
  • width, height, padding, margin 등을 적용 가능.
  • text-align이 적용 불가능.
  • vertical-align이 적용 불가능.
  • 예시 : article, dd, div, dl, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, noscript, ol, p, pre, section, table, ul 등등

1
2
3

div {
display : inline
}

• inline 요소
  • 줄바꿈이 이루어지지않는다.
  • 기본적으로 콘텐츠가 끝나는 지점까지의 길이를 가진다.
  • width, height, margin, padding-top, padding-bottom 적용 불가능.
  • height 대신 line-height로 높이조절가능. 대신 span태그에서는 불가능.
  • text-align 사용 가능
  • 예시 : a, b, br, button, code, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

1
2
3

div {
display : inline
}

• inline-block
  위의 블럭과 인라인을 합친 것이라고 생각하면 되지만 그 특징이 조금 차이난다

  • width, height 적용 가능
  • margin, padding-top, padding-bottom 적용 가능
  • line-height 적용 가능
  • inline-block 끼리 공백 생성됨 -> 상위 div에 { font-size: 0; } 를 적용하면 해결가능.
  • inline-block 끼리 높이 불일치될수있음 -> vertical-align 값 적용하면 해결가능.

파이썬 인강 : Web 기초 (프론트엔드 VS 백엔드, Codepen, MDN, devdocs, 크롬검색꿀팁)

1. 프론트엔드 (Front‑end) VS 백엔드 (Back-end)

가장 많이 들었던 프론트엔드와 백엔드 그 차이점은 무엇일까?

간단한 도식표로 쉽게 확인할 수 있다.

1. 프론트엔드 (Front‑end)
   파란색영역으로 HTML, CSS, Javascript를 주로 다룬다.
   사용자와 웹브라우저사이에서 입력과 출력을 주로 담당하며 가독성이나 사용성을 높여 사용자가 편리하게 이용할 수 있도록 해야한다.

2. 백엔드 (Back-end)
   주황색영역으로 웹브라우저요청에 웹서버와 데이터베이스를 통해서 응답해준다.

• OS(operating system 운영체제) : windows, linux, unix, mac, ios, android 등등
• DB(DataBase 데이터베이스) : oracle, mysql, mongoDB, mssql 등등
• Framework(프레임워크) : spring, flast/Django 등등
• 프로그래밍 언어 : java, php, python 등등

3. 풀스택 (Full-stack)
   하지만 요즘은 점점 경계가 모호해지고 있는 추세이다.
   따라서 프론트엔드와 백엔드를 모두 포함하여 풀스택 (Full-stack)이라고 부르기도 한다.

실습을 하기 앞서 강사님이 여러 좋은 사이트를 알려주었다

2. Codepen 코드펜

프론트엔드를 위해 굳이 에디터를 다운로드하지않아도 웹상에서도 쉽게 다룰 수 있다.
바로 codepen에서 HTML과 CSS, Javascript가 가능하다.
가입하지 않아도 바로 쓸 수 있는 장점이 있다.

원래 알고있던 사이트이다.
다른 개발자들이 만들어 놓은 멋진 그리고 화려한 코드를 볼 수만 있는 줄 알았다.
그런데 인강에서 코드 수정도 가능하다길래 직접 들어가보니 완전 신세계!!!
코드를 수정할 수 있다는 것을 처음 알았다. 좋은 프론트엔드 공부자료가 될 것이다.

Codepen Topics

특히 codepen에 topic에는 Vue나 React를 이용해서 만든 멋진 코드들도 볼 수 있다.
보는 재미가 쏠쏠해서 시간가는 줄도 몰랐다.
특히 슉슉 날아다니는 디자인을 보면 감탄밖에 나오지 않았다.
정말 멋있다 사람들……
나도 언젠가 그러한 코드를 공유할 수 있는 실력있는 개발자가 되고싶다.

3. MDN(the Mozilla Developer Network)

개발자들의 교과서라고 불리는 MDN이다
MDN은 FIREFOX를 운영하는 회사에서 만들었다고 한다.
사이트에 접속해서 technologies를 클릭하면 다양한 언어들이 있다.
이 중에 관심있는 언어를 클릭하고 궁금한 내용을 검색하면 쫘라락- 관련정보들이 엄청난 양으로 쏟아져나온다.
차근차근 주워먹기만 하면 끝!
물론 주워먹는 일이 힘들지만…..

4. Devdocs

데브독스는 위의 MDN을 가독성있게, 즉 보기쉽고 빠르게 찾을 수 있다.
UI가 MDN보다 훨씬 깔끔하고 쉬워서 깜짝 놀랬다.
이렇게 좋은 사이트가 있었다니!!! 왜 다들 MDN만 추천해줬던 것인가…
이젠 MDN보단 DEVDOCS를 더 잘 이용할 것같다.

데드독스의 또 한가지 장점은 원하는 언어만을 설정해서 검색할 수 있다는 점이다.
데브독스의 검색창 옆에 점3개아이콘을 클릭하면 Preferences가 나온다
여기에 수많은 언어들과 툴들이 있고 이 중 관심있는 것들만 틱해주고 저장해주면 앞으로 검색시에 내가 원하는 정보만 쏙쏙 쉽게 찾을 수 있다.

위의 이미지처럼 체크박스에 체크를 해주면 된다. 완전 꿀팁!!
이렇게 수많은 언어들이 있다니 세상 놀람다.

5. Can I use _?

Can I use는 사용하고자 하는 기술이 어떤 운영체제나 기반에서 제대로 작동하는 지를 알려주는 사이트이다.
이 사이트가 중요한 이유는 프로그램을 만들고 배포하기 전에 상용이 가능한 지를 확인해야하기때문에 꼭 알아야한다.
열심히 만든 프로그램이 제대로 작동 안하면 얼마나 속상할지… 절레절레

위의 예시처럼 sticky라는 기술은 구글에서 검색한 모습이다
붉은 색이 많을수록 지원 안되는 곳이 많으니 대체가능한 기술이 있는지 체크해야한다.

처음 본 사이트인 줄 알고 즐겨찾기 추가 버튼을 눌렀는데…
아니 이미 저장되어 있는 사이트였다.
띠용?!?!?!?!?!

그말인 즉슨 좋은 사이트라서 즐겨찾기해놓고 한 번도 안 들어갔나보다…허허;;

6.크롬 검색 꿀팁

덤으로 크롬검색꿀팁을 알게되었다

크롬에서 settings에 들어가서 search를 검색하여 Manage search engines을 클릭한다
default값으로는 google을 해놓으면 되고 Other search engines에 위의 세 사이트를 추가한다

크롬 검색창에 추가한 키워드를 입력후 tab을 치면 해당사이트내에서 검색결과를 바로 확인할 수 있다.

와… 대박!