뭐지~? 하고 백엔드 서버 주소를 타고 들어가봤더니 아니 글쎄

ㅋㅋㅋㅋㅋ 하핫 ;; 인증서 만료네욧 ;; 그래서 벌써 만료인가 하고 발급 받았던 당시 캡처해둔걸 보니

정말이었다. 그래서 바로 인증서를 갱신했다!

배포 당시 Let's Encrypt로 인증서를 발급 받았기 때문에, cerbot으로 간단하게 인증서를 갱신할 수 있었다.

그 전에 할 일: 서버에 접속하기 !!!! ssh [사용자 이름]@[서버 IP] 를 명령하고 비밀번호를 입력한 후 서버에 접속한다.

서버에 접속한 후 터미널에

sudo certbot renew

명령어를 쳐주면 완성 ^^* 인줄 알았으나.. 갑작스러운 오류 발생.. ㄷㄷ

하핫 nginx 설정 파일에 나도 모르게 'x'가 있었나보다...! 그래서 nginx 설정 테스트 실패해서 certbot이 nginx를 통해 인증서 갱신을 진행할 수 없다는 것이었다!

sudo nano /etc/nginx/site-enabled/오류 발생 파일 을 열고, 오타를 삭제한 후 저장을 해준다. (nano 사용 시 ctrl+X -> Y -> 엔터)

그리고 sudo nginx-t 명령어를 입력해 설정 문법을 검사하면 테스트 성공 메시지가 뜬 것을 확인할 수 있다. sudo systemctl restart nginx 명령어를 입력해 nginx를 재시작한다.

nginx 설정이 정상으로 된 것을 확인했으면, 다시 sudo certbot renew 명령어를 입력한다.

🎉 Congratulations, all renewals succeded 가 뜨면 인증서 갱신이 정상적으로 완료되었다는 의미!

하하.. 인증서 갱신하는게 양치하는 것보다 쉽다 !

people = [
    {'name': 'bob', 'age': 20},
    {'name': 'carry', 'age': 38},
    {'name': 'john', 'age': 7},
    {'name': 'smith', 'age': 17},
    {'name': 'ben', 'age': 27},
    {'name': 'bobby'},
    {'name': 'red', 'age': 32},
    {'name': 'queen', 'age': 25}
]

for person in people:
    if person['age'] > 20:
        print(person['name'])

# 결과 출력: bobby에는 age 값이 없으므로 에러 발생
carry
ben
Traceback (most recent call last):
  File "/Users/user/Desktop/sparta_python/pythonProject1/hello.py", line 13, in <module>
    if person['age'] > 20:
       ~~~~~~^^^^^^^
KeyError: 'age'

예외 처리를 통한 해결

try~except 문을 통해 해결한다.

people = [
    {'name': 'bob', 'age': 20},
    {'name': 'carry', 'age': 38},
    {'name': 'john', 'age': 7},
    {'name': 'smith', 'age': 17},
    {'name': 'ben', 'age': 27},
    {'name': 'bobby'},
    {'name': 'red', 'age': 32},
    {'name': 'queen', 'age': 25}
]

for person in people:
    try:
        if person['age'] > 20:
            print(person['name'])
    except:
        print(f'{person['name']}에는 입력된 나이가 없습니다.')

# 출력 결과
carry
ben
bobby에는 입력된 나이가 없습니다.
red
queen

단, 남용 시에는 어떤 에러가 났는지 알기 어려우므로 웬만하면 사용하지 않는 것이 좋다.

f'{any}문자열입니다.'의 형식으로 사용한다.

 scores = [
    {'name':'영수','score':70},
    {'name':'영희','score':65},
    {'name':'기찬','score':75},
    {'name':'희수','score':23},
    {'name':'서경','score':99},
    {'name':'미주','score':100},
    {'name':'병태','score':32}
]

for s in scores:
    name = s['name']
    score = str(s['score']) # 문자형으로 안바꾸면 오류
    print(f'{name}의 점수는 {score}점입니다.')

파일 불러오기 import

📁 main_func.py
def say_hi():
    print('안녕')

def say_hi2(name):
    print(f'{name}님 안녕하세요!')

main_func.py 파일에 있는 함수를 main_test.py 파일에서 사용하고 싶다면?

📁 main_test.py

from main_func import * 
# from 파일명 import *(전체) 이렇게 쓸 확률이 95% 😁
# from main_func import say_hi2 
# 함수명만 쓰면 이 함수만 현재 파일에서 쓰겠다는 의미
# (say_hi2 함수만 가져왔기 때문에 say_hi()는 사용 불가)

say_hi()
say_hi2('가희')

파이썬에서 함수를 선언할 땐 def로 선언한다.

def sum(a,b):
        print('더하기를 하셨네요')
    return a+b

result = sum(43,5)
print(result)

# 출력 결과
'더하기를 하셨네요'
48

활용

def bus_rate(age):
    if age > 65:
        print('무료입니다.')
        return 0
    elif age > 20:
        print('성인입니다.')
        return 2400
    else:
        print('청소년입니다.')
        return 1200

myrate = bus_rate(26)
print(myrate)

# 출력 결과
'성인입니다.'
2400

연습문제

• 주민 번호를 입력받아 성별을 출력하는 함수 만들기

문자열을 숫자열로 바꿀 때는 int() 함수를 사용하면 된다.

def check_gender(pin):
    num = int(pin.split('-')[1][0])
    if num % 2 == 0:
        print('여자입니다.')
    else:
        print('남자입니다.')

check_gender('150101-1012345')
check_gender('150101-3012345')
check_gender('150101-2012345')
check_gender('150101-4012345')

# 출력 결과
'남자입니다.'
'남자입니다.'
'여자입니다.'
'여자입니다.'

if문

money = 5000
if money > 3800:
    print('택시 타') # '택시 타'

money = 3000
if money > 3800:
        print('택시 타') # 조건에 맞지 않으므로 아무 동작도 일어나지 않음

else와 elif

else

money = 3000
if money > 3800:
    print('택시 타') # money가 3800보다 크다면 if문의 '택시 타' 출력
else:
    print('버스 타') # 3800보다 작으므로 else문의 '버스 타' 출력

elif

money = 100
if money > 3800:   # money가 3800 초과하면 '택시 타' 출력
    print('택시 타')
elif money > 1000: # money가 1000 초과 3800 이하이면 '버스 타' 출력
    print('버스 타')
else:              # money가 위 조건과 다 맞지 않다면 '걸어가' 출력
    print('걸어가')

위 코드에서는 money=100이므로 결과값은 '걸어가'가 출력된다. 자바스크립트의 else if와 동일하게 여러 번 사용할 수 있다.

줄여쓰기

num = 3
if num % 2 == 0:
    result = '짝수'
else:
    result = '홀수'

print(f'{num}은 {result}입니다.') # '3은 홀수입니다.'

위 코드를 줄여쓴다면 아래처럼 나타낼 수 있다.

num = 3

result = ('짝수' if num % 2 == 0 else '홀수')

print(f'{num}은 {result}입니다.') # '3은 홀수입니다.'

반복문

for문

fruits = ['apple', 'blueberry', 'pear', 'peach']
for fruit in fruits:
    print(fruit)

# 출력값
# apple
# blueberry
# pear
# peach

리스트 속 요소들을 하나씩 꺼내서 써먹는 것이라고 생각하면 쉽다. 위에서 fruit는 요소를 꺼내서 담는 변수로서, 변수명은 자기 맘대로 지어도 된다. 리스트에 있는 요소를 하나씩 돌면서 꺼내쓴다.

people = [
    {'name': 'bob', 'age': 20},
    {'name': 'carry', 'age': 38},
    {'name': 'john', 'age': 7},
    {'name': 'smith', 'age': 17},
    {'name': 'ben', 'age': 27},
    {'name': 'bobby', 'age': 57},
    {'name': 'red', 'age': 32},
    {'name': 'queen', 'age': 25}
]

for person in people:
    name = person['name']
    age = person['age']
    print(name, age)

# 출력값
# bob 20 # 이 때 20은 숫자형. 문자열 x
# carry 38
# john 7
# smith 17
# ben 27
# bobby 57
# red 32
# queen 25

• 반복문과 조건문을 같이 쓰기

  for person in people:
    name = person['name']
    age = person['age']
    if age > 20: # age가 20보다 클 때만 출력
        print(name, age)
  

출력값

carry 38 ben 27 bobby 57 red 32 queen 25

#### `enumerate`
요소의 순서를 나타내고 싶을 때 사용
```python
people = [
    {'name': 'bob', 'age': 20},
    {'name': 'carry', 'age': 38},
    {'name': 'john', 'age': 7},
    {'name': 'smith', 'age': 17},
    {'name': 'ben', 'age': 27},
    {'name': 'bobby', 'age': 57},
    {'name': 'red', 'age': 32},
    {'name': 'queen', 'age': 25}
]

for i, person in enumerate(people):
    name = person['name']
    age = person['age']
    print(i, name, age)

# 출력값
0 bob 20
1 carry 38
2 john 7
3 smith 17
4 ben 27
5 bobby 57
6 red 32
7 queen 25

break

people = [
    {'name': 'bob', 'age': 20},
    {'name': 'carry', 'age': 38},
    {'name': 'john', 'age': 7},
    {'name': 'smith', 'age': 17},
    {'name': 'ben', 'age': 27},
    {'name': 'bobby', 'age': 57},
    {'name': 'red', 'age': 32},
    {'name': 'queen', 'age': 25}
]

for i, person in enumerate(people):
    name = person['name']
    age = person['age']
    print(i, name, age)
    if i > 3: # i가 3보다 크다면 멈춰
        break

# 출력값
0 bob 20
1 carry 38
2 john 7
3 smith 17
4 ben 27

줄여쓰기

a_list = [1,3,4,5,7,2,3]

b_list = []
for a in a_list:
    b_list.append(a*2)

print(b_list) # [2, 6, 8, 10, 14, 4, 6]

위 코드를 줄여쓴다면 아래처럼 나타낼 수 있다.

a_list = [1,3,4,5,7,2,3]

b_list = [a*2 for a in a_list]
print(b_list) # [2, 6, 8, 10, 14, 4, 6]

연습 문제

1. 짝수만 출력하기

num_list = [1, 2, 3, 6, 3, 2, 4, 5, 6, 2, 4]

for num in num_list:
    if num % 2 == 0:
        print(num)

# 출력 결과
2
6
2
4
6
2
4

2. 짝수의 개수 출력하기

num_list = [1, 2, 3, 6, 3, 2, 4, 5, 6, 2, 4]

count = 0
for num in num_list:
    if num % 2 == 0:
        count += 1
print(count)

# 출력결과
7

3. 리스트 속 모든 숫자의 합계

num_list = [1, 2, 3, 6, 3, 2, 4, 5, 6, 2, 4]

sum = 0
for num in num_list:
    sum += num
print(sum)

# 출력 결과
38

4. 리스트 속 숫자 중 가장 큰 수 구하기

num_list = [1, 2, 3, 6, 3, 2, 4, 5, 6, 2, 4]

max = 0
for num in num_list:
    if max < num: # max가 num보다 작다면
        max = num # max에 그 num 값을 넣어라

print(max)

# 출력 결과
6

변수 = 변할 수 있는 것, 어떠한 값을 담는 '상자'

컴퓨터가 기억하고 있는 메모리 공간을 변수가 가리킨다~ 라고 생각해도 좋다. (메모리에 올려두는 개념)

a = 11.5
print(a) # a를 출력하는 함수, 결과값은 11.5

변수에 넣은 값을 확인하고 싶다면 print() 함수를 사용하여 값을 출력한다.

print('hi') # hi
print(True) # True

자료형 (데이터 타입)

변수나 값의 자료형을 확인하기 위해서는 type() 함수를 사용한다. 파이썬에는 다양한 자료형이 있지만 가장 많이 쓰이는 자료형은 아래와 같다.

NoneType

논타입, 값이 없다. None 이라는 값을 가지고 있는 데이터 타입

이는 다음과 같은 상황에서 반환된다.

• 호출한 함수가 반환 값을 가지고 있지 않을 때
• 무언가를 검색하였는데 해당 값을 찾을 수 없을 때
• 접근하는 key가 dict에 존재하지 않을 때

False, 0과는 다른 의미임에 주의

Number: int, float, complex

int 정수 타입

# int 선언
a = 10
print(a) # 10

# int 생성자
b = int(10.4)
print(b) # 10

• 파이썬은 범위가 무한대인 정수 자료형을 가지고 있다. -> 정수 오버플로우 발생 X 아무리 큰 값을 저장하더라도 하나의 자료형인 int 로 해결할 수 있다.

  float 실수 타입

  # float 선언
  a = 11.7
  print(a) # 11.7
  

float 생성자

b = float(21.5) print(b) # 21.5

- 실수를 선언하기 위해서는 소수점을 명시해줘야 한다.
- 같은 10이라도 `int`는 `10`, `float`는 `10.0`으로 표현해야 한다.
(단, `.` 앞/뒤의 `0`은 생략 가능 -> `10.`으로 표기해도 됨)
- 부동 소수점 오차가 생길 수 있으므로 주의가 필요하다.
- 정수와 실수 연산 시 -> 실수 타입으로 반환된다.
#### `complex` 복소수 타입
```python
# complex 선언
a = 2 + 3j # 실수부 + 허수부j
b = complex(3, 5) # complex(실수부, 허수부)
print(a) # 2 + 3j
print(b) # 3 + 5j

bool

참(True)과 거짓(False)을 가질 수 있는 데이터 타입

a = True
b = False

c = ( 3 > 2 )
print(c) # True

d = ( 3 < 2 )
print(d) # False

e = ( 3 == 2 )
print(e) # False

• 파이썬에서 True, False는 파이썬의 예약어이기 때문에 반드시 첫 글자는 대문자로 작성
• 문자열(''), 리스트([]), 튜플(()), 딕셔너리([])가 원소를 가지지 않고 비어있으면 False, 하나 이상의 원소를 가지면 True
• 숫자형에서 값이 0이라면 False, 0이 아닌 다른 수라면 True

  str

1.

first_name = 'Gahee'
last_name = 'Park' # 큰 따옴표든 작은 따옴표든 상관 없음

print(first_name+last_name) # GaheePark

2.

multi_str1 = """
문자열
멀티라인
"""
multi_str2 = '''
문자열
멀티라인
'''

3.

a = 2
b = 'a'
print(b) # 숫자가 아닌 문자열 a 출력

4. 문자열 + 숫자 시 에러 발생

   a = "3"
   b = "hi"
   print(a+b) # 3hi
   

a = 3 b = "hi" print(a+b)

에러 발생

Traceback (most recent call last):

File "/Users/user/Desktop/sparta_python/pythonProject1/hello.py", line 3, in

print(a+b)

^

TypeError: unsupported operand type(s) for +: 'int' and 'str'

5.
```python
a = '2'
b = str(2) # 문자열로 바꾸는 함수
print(a+b) # '22'

6. 문자열의 길이를 세고 싶을 땐 len() 함수 사용

   text = 'abcdefghijk'
   result = len(text)
   

print(result) # 11

7. 문자열 자르기 (슬라이싱)

(1) 다양한 방법으로 활용 가능
```python
text = 'abcdefghijk'
result = text[:3]

print(result) # abc

text = 'abcdefghijk'
result = text[3:]

print(result) # defghijk

text = 'abcdefghijk'
result = text[3:7] # 3번째부터 7번째까지 문자열을 자르고 싶다

print(result) # defg

text = 'abcdefghijk'
result = text[:] # 복사하기

print(result) # abcdefghijk

text = 'abcdefghijk'
result = text[:-5]

print(result) # abcdef

text = 'abcdefghijk'
result = text[5:-1]

print(result) # fghij

(2)

myemail = '930_10@naver.com'
result = myemail.split('@') # '@'를 기준으로 자른다
print(result) # ['930_10', 'naver.com'] 배열로 출력

result2 = myemail.split('@')[1]
print(result2) # 'naver.com'

# 만약 naver가 필요하다면?
result3 = myemail.split('@')[1].split('.')[0]
print(result3) # 'naver'

phone = '02-123-1234' # 지역번호만 자르고 싶다면?
result = phone.split('-')[0]
print(result) # '02'

8. 문자열 찾기 (인덱싱)

   text = 'abcdefghijk'
   result = text[4]
   

print(result) # e

### `list`
> 리스트 자료형은 순서, 중복, 수정, 삭제를 모두 지원하는 자료형
`[]` 기호를 사용한다.

```python
a_list = ['apple', 'pear', 'strawberry'] # 문자열 뿐만 아니라 불리언형, 숫자형도 가능
print(a_list) # ['apple', 'pear', 'strawberry']
print(a_list[0]) # 'apple' 인덱스로 접근

• 원소를 가지지 않는 빈 리스트 선언 가능
• 서로 다르거나 같은 타입의 자료형을 원소로 가지도록 선언 가능
• 순서를 가지는 자료형이기 때문에 인덱스로 접근이 가능하다.

  a_list = [3,5,2,6,8]
  result = a_list[-1] # -1 입력 -> 무조건 제일 마지막 요소 출력
  print(result) # 8

• 슬라이싱으로 특정한 범위의 원소들만 접근 가능
  • start_index는 범위에 포함되지만 end_index는 포함되지 않음

    # slicing 문법
    list_name[start_index : end_index : step]
    # 또는 step 생략(생략시 자동으로 1로 설정)
    list_name[start_index : end_index]
    

예시

list = [0, 1, 2, 3, 4, 5] print(list[2:4])

[2, 3]

- 리스트 속에 리스트도 담을 수 있다.
```python
a_list = [2, True, 'strawberry', ['blueberry','redberry']]
print(a_list) # [2, True, 'strawberry', ['blueberry','redberry']]
print(a_list[3]) # ['blueberry', 'redberry']
print(a_list[3][1]) # 'redberry'

• append() 함수: 리스트의 맨 끝에 요소를 추가하는 함수

  a_list = [3,5,2,6,8]
  a_list.append(99)
  print(a_list) # [3, 5, 2, 6, 8, 99]

• 리스트 요소 수 세기

  a_list = [3,5,2,6,8]
  result = len(a_list)
  print(result) # 5

• sort() 함수: 리스트 정렬하는 함수

  a_list = [3,5,2,6,8]
  a_list.sort() # 오름차순
  print(a_list) # [2, 3, 5, 6, 8]
  

a_list.sort(reverse=True) # 내림차순 print(a_list) # [8, 6, 5, 3, 2]

- `in` 을 사용하여 값이 있는지 없는지 파악하기
```python
a_list = [3,5,2,6,8]
result = (5 in a_list)
print(result) # True

• 리스트 요소 바꾸기

  a_list = ['사과', '감', '배']
  a[1] = '딸기'
  print(a_list) # ['사과', '딸기', '배']

  dict

  딕셔너리. 사전 자료형은 순서가 없고 키-밸류 쌍으로 존재한다. 키 중복을 허용하지 않고, 데이터의 수정이나 삭제가 가능하다. {} 기호를 사용한다.

a_dict = {'name': 'bob', 'age': 27}
print(a_dict['name']) # 'bob'
print(a_dict['age']) # 27

• 딕셔너리 선언 시 key:value 식으로 아이템을 선언할 수 있지만, key=value의 형식으로도 사용 가능
• 가독성을 위해 각 item간 줄 띄어쓰기를 사용할 수 있다.
• value를 찾고 싶을 땐, dict_name[key_name] 처럼 찾을 수 있다.

  # 빈 dict 선언
  dict1 = {}
  dict2 = dict()
  # 원소가 있는 dict 선언
  dict3 = {'name': 'Kim', 'phone': '01012345678', 'birth': '840102'}
  dict4 =  dict(name='Kim', phone='01012345678', birth='840102')
  # 가독성을 위해 줄 띄어쓰기
  dict5 = {
    'name': 'Kim', 
    'phone': '01012345678', 
    'birth': '840102'
  }
  print(dict5['name'])
  >>> Kim

• 리스트와 딕셔너리가 조합되어 들어가기도 한다.

  a_dict = {'name': 'bob', 'age': 27, 'friends': ['John', 'Mike', 'Ann']}
  result = a_dict['friends']
  print(result) # ['John', 'Mike', 'Ann']
  

result = a_dict['friends'][0] print(result) # 'John'

- 딕셔너리에 키-밸류 쌍 추가
```python
a_dict = {'name': 'bob', 'age': 27, 'friends': ['John', 'Mike', 'Ann']}
a_dict['height'] = 180
print(a_dict) # {'name': 'bob', 'age': 27, 'friends': ['John', 'Mike', 'Ann'], 'height': 180}

• 딕셔너리에서 값 검색

  a_dict = {'name': 'bob', 'age': 27, 'friends': ['John', 'Mike', 'Ann']}
  a_dict['height'] = 180
  result = ('height' in a_dict)
  print(result) # True

• get(), update()를 사용해 값을 가져오거나 새로 추가하기

  dict.get('key')
  dict.update({'key': value})

  list와 dict의 조합

• 하나의 리스트에 여러 개의 딕셔너리가 들어가 있는 형태

  people = [
    {'name': 'bob', 'age': 27},
    {'name': 'John', 'age': 30}
  ]
  

print(people) # [{'name': 'bob', 'age': 27}, {'name': 'John', 'age': 30}]

만약 30이라는 값을 얻고 싶다면?

print(people[1]['age']) # 30

#### 연습 문제
- smith의 sience 점수를 출력해라
```python
people = [
    {'name': 'bob', 'age': 20, 'score':{'math':90,'science':70}},
    {'name': 'carry', 'age': 38, 'score':{'math':40,'science':72}},
    {'name': 'smith', 'age': 28, 'score':{'math':80,'science':90}},
    {'name': 'john', 'age': 34, 'score':{'math':75,'science':100}}
]

# smith의 sience 점수 출력
print(people[2]['score']['science']) # 90

tuple

순서와 중복은 지원하지만 수정과 삭제는 지원하지 않는다 (불변성) () 기호를 사용 보안적 이슈 등의 이유로 절대 변경되면 안되는 중요한 값을 불변으로 유지하고 싶을 때 사용

• 튜플 내부에 원소가 하나만 있을 경우: 끝에 , 반드시 추가해야 한다.
  • 그렇지 않을 경우 괄호 안에 있는 원소의 타입으로 인식됨

    # 빈 tuple 선언
    tuple1 = ()
    tuple2 = tuple()
    # 원소가 있는 tuple 선언
    tuple3 = (1,)  # 원소가 하나일 때는 끝이 , 로 끝나야 튜플로 인식한다.
    tuple4 = (1, 2, 3, 4)
    tuple5 = ('football', 1, 2, 'soccer', False, 3.14159) # 서로 다른 자료형 사용 가능

• list와 마찬가지로 다양한 데이터 타입을 함께 사용할 수 있다.
• 값을 수정하거나 삭제하려고 하면 에러 발생

  a = ('사과', '감', '배')
  

a[1] = '수박' print(a)

출력 결과

Traceback (most recent call last): File "/Users/user/Desktop/sparta_python/pythonProject1/hello.py", line 3, in a[1] = '수박' ~^^^ TypeError: 'tuple' object does not support item assignment

- 튜플의 값을 변경하고 싶다면 list 타입으로 변환 후 수정해야 한다.
```python
tuple = (1, 2, 3)
tuple = list(tuple)
tuple[0] = 100
print(tuple[0])
>>> 100

set

집합 자료형은 순서를 가지지 않고, 중복도 허용하지 않는 자료형이다.

a = [1,2,3,4,5,6,7,8,9,0,2,4,5,1]

a_set = set(a)
print(a_set)

# 출력 결과
{0, 1, 2, 3, 4, 5, 6, 7, 8, 9}

• 순서가 있는 자료형과는 달리 인덱스로 접근 불가
• 원소를 찾고 싶다면 in 키워드 사용

  set = {1, 2, 3, 4}
  if 1 in set:
    print("found 1")
  >>> found 1

  교집합 구하기

  a = ['사과', '감', '배']
  b = ['사과', '귤', '참외']
  

a_set = set(a) b_set = set(b) print(a_set & b_set) # {'사과'}

#### 합집합 구하기
```python
a = ['사과', '감', '배']
b = ['사과', '귤', '참외']

a_set = set(a)
b_set = set(b)
print(a_set | b_set) # {'귤', '사과', '배', '참외', '감'}

차집합 구하기

a = ['사과', '감', '배']
b = ['사과', '귤', '참외']

a_set = set(a)
b_set = set(b)
print(a_set - b_set) # {'감', '배'}

연습문제

• a는 듣고 b는 듣지 못한 수업을 차집합을 통해 구하는 방법

  student_a = ['물리2','국어','수학1','음악','화학1','화학2','체육']
  student_b = ['물리1','수학1','미술','화학2','체육']
  

print(set(student_a) - set(student_b)) # {'화학1', '물리2', '음악', '국어'}

### `func`
> 함수도 독자적인 자료형을 가진다.

```python
def sum(a,b):
        print('더하기를 하셨네요')
    return a+b

result = sum(43,5)
print(result)

# 출력 결과
'더하기를 하셨네요'
48

함수 활용

def bus_rate(age):
    if age > 65:
        print('무료입니다.')
        return 0
    elif age > 20:
        print('성인입니다.')
        return 2400
    else:
        print('청소년이거나 아이입니다.')
        return 1200

myrate = bus_rate(26)
print(myrate)

# 출력 결과
'성인입니다.'
2400

연습문제

• 주민 번호를 입력 받아 성별을 출력하는 함수 만들기

  def check_gender(pin):
    num = int(pin.split('-')[1][0])
    if num % 2 == 0:
        print('여자입니다.')
    else:
        print('남자입니다.')
  

check_gender('150101-1012345') check_gender('150101-3012345') check_gender('150101-2012345') check_gender('150101-4012345')

출력 결과

'남자입니다.' '남자입니다.' '여자입니다.' '여자입니다.'

``` 참고 문자열을 숫자열로 바꿀 때는 int() 함수를 사용한다.

이번 글에서는 파이썬의 변수 선언, 많이 사용되는 자료형에 대해 다뤄보았다. 파이썬 고수가 되기 위해 열심히 가..가보자고

CSS Module (CSS in CSS)

리액트 프로젝트에서 컴포넌트를 스타일링할 때, 여러 개의 CSS 파일을 사용하다보면 동일한 이름의 클래스가 중복으로 정의될 수 있다. 중복된 클래스가 정의된 리액트 엘리먼트는 여러 클래스에서 지정한 스타일이 모두 다 적용되며 내가 원하는 스타일이 안나올 수 있다! 이때, CSS Module 기술을 사용하면 CSS 클래스가 중첩되는 것을 방지할 수 있다. [클래스 이름]_[해시값] 형태로 만들어진다. 같은 rounded-button을 가지고 있지만, 클래스 이름에 대해 고유한 이름이 만들어지기 때문에 CSS 클래스 이름과 중복되는 일에 대해 걱정할 필요는 없다.

👩🏻‍💻 사용 방법 & 예제

간단하게, css 파일의 확장자를 .module.css 로 하면 된다. css module 기술을 이용해 위 사진의 버튼 컴포넌트들을 만들어 보았다.

Button.module.css css 파일 ⬇️

📁 cssmodule/src/components/Button.module.css

.rounded-button {
  background-color: dodgerblue; /* background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 6px 18px; /* Padding */
  text-align: center; /* Center text */
  text-decoration: none; /* Remove underline */
  display: inline-block; /* Display as inline-block */
  font-size: 16px; /* Font size */
  margin: 4px 2px; /* Margin */
  cursor: pointer; /* Cursor pointer */
  border-radius: 6px; /* Border radius */
}

.button-darkblue-gray {
  background-color: darkblue;
  color: gray;
}

.button-lightblue-black {
  background-color: lightblue;
  color: black;
}

.button-bg-gray {
  background-color: darkblue;
  color: lightgray;
}

.button-bg-black {
  background-color: lightblue;
  color: black;
}

.button-salmon {
  background-color: salmon;
}

Button.jsx 컴포넌트 파일 ⬇️ 컴포넌트 상단에 module.css 파일을 import 한 후 사용

📁cssmodule/src/components/Button.jsx
import PropTypes from 'prop-types';
import styles from './Button.module.css'

// propType 지정
Button.propTypes = {
  children: PropTypes.string.isRequired,
  color: PropTypes.string,
  backgroundColor: PropTypes.string
}


function Button({ children, color, backgroundColor }) {
  return <button className={ 
    `${styles['rounded-button']} 
     ${styles['button-'+backgroundColor]}
     ${styles['button-bg-'+color]}` }>{ children }
    </button>
}

export default Button;

템플릿 리터럴 방식으로 클래스 이름을 가져와준다. 근데 만약 여러 개라면 ${style.first}, ${style.second} 이렇게 해야 하는데 너무 번거롭게 느껴진다.. (-> 를 해결하기 위해 classNames 라이브러리를 쓸 수 있다. 이건 다음에 알아봐야지..)

App.jsx 최종 렌더링 파일 ⬇️

📁cssmodule/src/App.jsx
import './App.css'
import Button from './components/Button';

function App(){

  return (
    <>
      <h1>CSS 모듈 사용</h1>
      <Button>기본 버튼</Button>
      <Button backgroundColor="darkblue" color="gray">다크블루색 버튼</Button>
      <Button backgroundColor="lightblue" color="black">라이트블루색 버튼</Button>
    </>
  )
}

export default App;

렌더링 결과 ⬇️

🔍 그렇다면 언제 사용하는 것이 좋을까?

• 레거시 프로젝트에 리액트를 도입할 때
  • 기존 프로젝트에 있던 CSS 클래스와 이름이 중복되어도 스타일이 꼬이지 않음
• CSS 클래스 네이밍 규칙을 만들기 귀찮을 때, 힘들 때, 번거로울 때
  • 클래스명을 모듈 내에서만 중복되지 않게 작성하면 되기 때문에 클래스명 네이밍 고민이 줄어든다.
• 보통 컴포넌트 당 CSS 모듈을 작성하기 때문에 스타일을 유지보수할 때에도 편하다.

💡 새로 알게 된 사실

CSS Module은 Sass에서도 사용할 수 있다! (아직은 안써봤지만) node-sass 를 설치한 후, 확장자를 .module.scss 로만 바꿔주면 사용할 수 있다.

styled-components (CSS in JS)

💅 styled-components ! 저 네일아트 하는 이모지가 인상 깊어서 정말 써보고 싶었던 라이브러리다.

styled-components는 대표적인 css in js 라이브러리이며, 그만큼 대중적으로 많이 사용하고 있다. (이 외에는 emotion과 styled-jsx가 있다.) (css in js: 자바스크립트 코드로 css를 작성하는 것)

css module 방식과는 다르게, class로 지정하는 것이 아니라 props를 이용해서 css를 적용하는 것을 볼 수 있다. 그럼 어떻게 사용하느냐?

👩🏻‍💻 사용 방법 & 예제

설치

npm i styled-components

styled-components가 필요한 프로젝트 폴더에서 명령어를 입력해주고 엔터치면 설치 완료!

예제

styled-components를 이용해 버튼을 만들어보았다.

버튼 컴포넌트를 만들고, 스타일 입히기 StyledButton.jsx ⬇️

📁 styledcomponents/src/components/StyledButton.jsx

import styled from 'styled-components';
import PropTypes from 'prop-types';

// Tagged Template Literal 방식을 사용해 컴포넌트의 props를 읽어온다.
const ButtonStyle = styled.button`
  background-color: ${ props => props.backgroundColor || 'dodgerblue' }; /* background */
  border: none; /* Remove borders */
  color: ${ props => props.color || 'white' }; /* White text */
  padding: 6px 18px; /* Padding */
  text-align: center; /* Center text */
  text-decoration: none; /* Remove underline */
  display: inline-block; /* Display as inline-block */
  font-size: ${ props => props.size || '16px' }; /* Font size */
  margin: 4px 2px; /* Margin */
  cursor: pointer; /* Cursor pointer */
  border-radius: 6px; /* Border radius */
`;

// ButtonStyle에서 색상만 따로 바꾸고 싶다면 이렇게 작성한다.
const ButtonStyleSalmon = styled(ButtonStyle)`
  background-color: salmon; /* background */
`;

// propType 지정
Button.propTypes = {
  children: PropTypes.string.isRequired,
}

Submit.propTypes = {
  children: PropTypes.string.isRequired,
  backgroundColor: PropTypes.string
}

// props를 하나하나 넣어주는 번거로운 짓은 하지 말고, rest 문법을 사용한다.
function Button({ children, ...rest }){
  return <ButtonStyle type="button" { ...rest }>{ children }</ButtonStyle>
}

function Submit({ children, ...rest }){
  return <ButtonStyleSalmon type="submit" { ...rest }>{ children }</ButtonStyleSalmon>
}


export { Button, Submit }

최종 렌더링 파일 App.jsx ⬇️

📁 styledcomponents/src/App.jsx

import { Button, Submit } from "./components/StyledButton";

function App(){
  return (
    <>
      <h1>Styled Components</h1>
    // props를 넘겨주어 size, color, bgColor 등 원하는 것을 바꿔줄 수도 있다.
      <Button 
        size="12px" 
        color="lightblue"
        backgroundColor="darkblue">Button Type 버튼</Button>
      <Submit>Submit Type 버튼</Submit>
    </>
  )
}

export default App;

렌더링 결과 ⬇️

🔍 styled-components의 장점

• 얘도 css module 방식처럼, css 클래스명의 중복을 고려할 필요가 없다. 고유한 클래스 이름을 자동으로 생성해주기 때문에!
• 자바스크립트 코드의 변수 값을 CSS 스타일링에 사용할 수 있기 때문에, 동적으로 스타일링이 가능하다. (props , state 등을 이용해서)
• 컴포넌트와 스타일이 결합 -> 컴포넌트 단위로 스타일을 수정하기 용이하다.
• vender prefix가 자동으로 추가된다!
  • vender prefix
    • css 표준안으로 확정되지 않았거나 특정 브라우저에서만 지원되는 css 속성을 사용하고 싶을 때, 벤더 프리픽스 사용 -> 기능이 포함되어 있지 않은 브라우저에서도 사용할 수 있게 해준다.
    • 예) -webkit-line-clamp: 5; (css 처음 배울 때가 기억나는구먼..)

💬 css module vs styled-components

내 개인적 의견으로는 styled-components가 더 쓰기 편한 것 같다! 한 파일 안에서 컴포넌트를 관리하는게 더 좋아서 .. (프로젝트 시작하면 또 다를 수도?) 일단 오늘 처음 배워본 입장에선, styled-components 압승

tailwindCSS

CSS 수업이 끝나고 혼자 조금 독학해 본 테일윈드! 리액트에서도 쓸 수 있는 줄 몰랐는데, 오늘 배우게 되었다~!

• utility-first CSS framework
• 미리 정의된 CSS 클래스를 이용해서 스타일링을 할 수 있는 프레임워크
• CSS 파일을 따로 만들 필요 없이 제공되는 클래스를 HTML 태그에 직접 지정한다.

  👩🏻‍💻 사용 방법 & 예제

  설치

tailwindcss를 사용할 프로젝트 폴더에 아래 명령어를 입력해서 설치해준다.

npm i -D tailwindcss postcss autoprefixer

postcss

• CSS 변환 도구
  • 다양한 CSS 전처리기, 후처리기 및 CSS 확장을 사용하도록 도와줌
• PostCSS를 사용해서 CSS를 처리하고 변경할 수 있다.
• 플러그인 생태계: 다양한 플러그인을 사용해 CSS를 확장하고 향상시킬 수 있다.
  • autoprefixer: vender prefix를 자동으로 추가
  • tailwindcss: tailwindcss를 사용할 수 있게 함
• 성능 개선: CSS를 효율적으로 처리하고 최적화함
• 최신 CSS 스펙을 지원하지 않는 브라우저에서도 최신 CSS 사용을 가능하게 해준다.
• 자동화 도구와 통합 -> CSS 작업 자동화, 효율적 관리

설치를 마쳤으면, 설정 파일을 수정해주어야 한다.

npx tailwindcss init -p

를 터미널에 입력해주면, postcss.config.js 파일이 생성된다. tailwind.config.js 파일도 확인할 수 있다.

설정 파일 수정

📁 tailwind/postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

기본적으로 tailwindcss와 autoprefixer 플러그인이 추가되어 있다. 없다면 수정해주기~

📁 tailwind/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    // 타입스크립트를 사용한다면, ts, tsx 확장자명도 추가해준다.
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwindcss 지시어 추가

📁 tailwind/src/index.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './App.css';

이렇게 써도 되고, 아니면

// 이 때, App.css import 구문은 최상단에 위치해야 함
@import './App.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

요렇게 써도 된다.

만약 esLint에서 자꾸 경고를 준다면 vscode settings - unknown at rules - CSS > Lint: Unknown At Rules를 ignore로 변경한다.

예제

테일윈드로도 똑같이 버튼 컴포넌트를 만들어 보았다~

버튼 컴포넌트 파일 ⬇️

📁 tailwind/src/components/Button.jsx

import PropTypes from 'prop-types';

// propType 설정
Button.propTypes = {
  children: PropTypes.string.isRequired,
  bgColor: PropTypes.string,
  fontSize: PropTypes.string
}

// 역시나 여기서도 rest 문법을 사용한다.
function Button({ children, bgColor="red", fontSize="sm", ...rest }){

let btnColor = {
  blue: `bg-blue-400`,
  green: `bg-green-400`,
  gray: `bg-gray-400`,
  red: `bg-rose-400`
};

let btnSize = {
  sm: 'py-1 px-2 text-sm',
  md: 'py-2 px-4 text-base',
  lg: 'py-2 px-6 text-lg',
  xl: 'py-2 px-8 text-xl'
};

let btnHoverColor = {
  blue: `hover:bg-blue-300`,
  green: `hover:bg-green-300`,
  gray: `hover:bg-gray-300`,
  red: `hover:bg-rose-300`
};

  return <button 
              className={`
              ${btnColor[bgColor]}
              text-gray-50 
              font-bold ${btnSize[fontSize]}
              mx-2 
              my-3 
              rounded-md
              ${btnHoverColor[bgColor]}
            `} 
            {...rest} >{ children }</button>
}

export default Button;

💡 중요한 사실!

tailwind 공식 문서에 따르면, Dynamic class name을 설정할 때는 항상 완전한 클래스 이름으로 설정해야 한다. 완전한 클래스 네임만 따로 추출해서 그 추출한 애들만 최종 결과에 반영하기 때문이다. 따라서, bg-${bgColor}-300 이렇게 사용하는 것은 안된다!! (이거 때문에 tailwind 쓰기 싫다 엉엉 코드가 너무 길어~!)

아무튼 계속해서 최종 렌더 파일인 App.jsx 파일을 보자. (벨로그는 콜아웃 기능이 없나요?.... 불편해)

📁 tailwind/src/App.jsx

import Button from "./components/Button";

function App(){
  return (
    <>
      <h1 className="myTitle">Tailwind CSS</h1>
      <p>Hello Tailwind</p>
      <Button>기본 버튼</Button>
      <Button 
        bgColor="blue" 
        fontSize="md">파란 버튼</Button>
      <Button 
        type="submit" 
        bgColor="green" 
        fontSize="lg" 
        onClick={ () => alert('등록하시겠습니까?') }>녹색 버튼</Button>
      <Button 
        bgColor="gray" 
        fontSize="xl">회색 버튼</Button>
      <button 
        className={`
            bg-violet-400 
            text-gray-50 
            font-bold 
            px-3 
            py-1 
            mx-2 
            my-3 
            text-lg 
            rounded-md 
            hover:bg-violet-300
        `}>컴포넌트 아님</button>
      <br />
      <button className="btn btn-primary">주요 버튼</button>
      <button className="btn btn-warn">경고 버튼</button>
    </>
  )
}

export default App;

클래스를 이용해 스타일을 입히다 보니, 아주 번잡스럽기 그지 없다. 그럴 땐 주요 버튼과 경고 버튼의 코드를 보자. 깔끔하지 않는가요? 저렇게 줄여쓰기 위해.. index.css 파일을 이용해 자주 사용하는 버튼들을 따로 설정해주었다.

📁 tailwind/src/index.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './App.css';

@layer components {
  .btn {
    @apply 
        bg-violet-400 
        text-gray-50 
        font-bold 
        px-3 
        py-1 
        mx-2 
        my-3 
        text-lg 
        rounded-md 
        hover:bg-violet-300
  }

  .btn-primary {
    @apply bg-orange-400 hover:bg-orange-300
  }

  .btn-warn {
    @apply bg-yellow-400 hover:bg-yellow-300
  }
}

이렇게 설정해두고 갖고오면 된다!

최종 결과물 ⬇️

ㅎ Button 컴포넌트 파일을 만드는가 vs index.css 파일에서 한번에 하는가~는 자신의 선택입니다용 근데 .. 나는 너무너무 불편해서 못쓸 것 같다 ㅠㅠ

🔍 tailwindcss의 장점

• 개발 생산성이 높다.
  • 개발자가 CSS 클래스 정의할 필요 X, 미리 정의된 클래스 사용 -> 개발 속도와 생산성 향상 가능
• 재사용 가능한 클래스 제공 -> 동일한 클래스를 여러 엘리먼트에 사용해 일관된 디자인을 구축할 수 있다.
• 많은 유틸리티 클래스를 제공하며 커스터마이징이 가능해 유연성이 높다.
• 클래스 이름이 직관적이라 가독성이 높다.
• 사용하는 클래스만 포함해 최적화된 CSS 파일을 생성한다.

💬 여담

난.. tailwind 잘 모르겠다.. (새로운게 아니라 그런가?ㅋㅋㅋ) 근데 배우는 입장이니까.. 다 열심히 써봐야겠다...!!

그럼 오늘 정리는 끝! 휴 이거 다쓰니까 노션 복구됐네~!

그러다 position: absolute나 relative, 또한 transform 속성에 대해 알고 난 후 위 속성들을 구현하기 위해선 3차원 공간처럼 css에도 z축이 있다는 것을 알게 되었다.

그래서 오늘 포스팅은.. z-index가 뭔지, 그리고 추가로 알아야 할 개념인 쌓임 맥락이 뭔지에 대해 내가 알아본 정보들을 정리해서 적어보려고 한다..!

알면 알수록 신기한 css의 세계~

z-index

위치 지정 요소와 그 자손, 혹은 일반적으로 flex-item의 z축 순서를 지정한다. initial value: auto, inheritance: no

• 문법: auto 또는 정수값을 사용한다.

  • 값이 auto일 경우, 새로운 쌓임 맥락을 생성하지 않는다. 쌓임 맥락에서의 위치는 부모 요소와 동일하다는 의미

  • 정수값일 경우, 이 값은 해당 요소의 z축 상의 위치를 나타낸다.

    • z-index는 position 속성이 설정된 요소에 대해서만 의미를 가진다.

  • 자신이 생성한 쌓임 맥락에서 자신의 z축 위치는 0으로 설정된다.

  • 따라서 그 자손의 z-index를 자기 외의 바깥 요소와 비교하지 않는다. (그 자손은 여기서 생성된 쌓임 맥락 위로 쌓이기 때문)

  • 더 큰 z-index 값을 가진 요소가 그보다 작은 값의 요소 위를 덮는다.

    /* Ex */
    z-index: -1
    z-index: 0;
    z-index: 2;
    z-index: 999;

    위 예시에서 만약 같은 쌓임 맥락 안에 있는 다른 요소들 4개에 순서대로 저 값을 부여해줬다면, z-index: 999; 가 지정된 요소가 다 덮는다는 의미이다.

• 위치 지정 요소(position: static이 아닌 다른 값인 요소)에 대해, z-index 속성은 아래 항목을 지정한다.
  • 현재의 쌓임 맥락에서 자신(z-index가 지정된 요소) 의 위치
  • 자신만의 쌓임 맥락 생성 여부

z-index를 이해하기 위해선 계속 나오는 단어인 '쌓임 맥락'에 대해서도 숙지를 해야한다. 따라서, z-index는 잠시 제쳐두고 쌓임 맥락에 대해 알아보자.

쌓임 맥락 (Stacking Context)

가상의 Z축을 사용한 html 요소의 3차원 개념화 각각의 html 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지한다.

쌓임 맥락을 형성하는 요소의 조건

• 문서의 루트 요소 (<html>)
• position이 absolute 또는 relative이며, z-index가 auto가 아닌 요소 (두 가지를 모두 만족해야 한다.)
• position이 fixed 또는 sticky인 요소
• flex-item 중 z-index가 auto가 아닌 요소
• opacitiy가 1보다 작은 요소
• mix-blend-mode가 normal이 아닌 요소
• 아래 속성 중 하나라도 none이 아닌 값을 가진 요소
  • transform
  • filter
  • backdrop-filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border

이 외에도 여기를 클릭하면 쌓임 맥락을 형성하는 요소의 조건을 더 알아볼 수 있다.

쌓임 맥락의 특징

• 쌓임 맥락 속 자식 요소의 z-index 값은 부모에게만 의미가 있다. 하나의 쌓임 맥락은 부모의 쌓임 맥락 속에서 통째로 하나의 단위로 간주된다.
• 각각의 쌓임 맥락은 독립적이다. 어느 요소든 콘텐츠를 쌓은 후에는 그 요소를 통째로 부모의 쌓임 맥락 안에 배치한다.
• 모든 요소가 쌓임 맥락을 생성하는 것은 아니다.
• 쌓임 맥락 내부에 또 쌓임 맥락이 포함될 수 있다. -> 쌓임 맥락은 계층 구조를 이루며, 쌓임 맥락의 계층 구조는 html 요소 계층 구조의 부분집합이다.
• 자신의 쌓임 맥락을 만들지 않을 경우, 부모/조상의 쌓임 맥락에 의해 동화된다.

tmi지만 나는 쌓임 맥락을 캔버스라고 생각한다. 각 요소들이 물감을 칠할 수 있는 바탕? 배경? 같은.. 뭔가 '맥락'이라고 하니 어렵게 다가와서 이렇게 생각하니까 훨씬 이해가 잘 되었다. 물론 쌓임 맥락의 구조가 더 복잡하고 어렵다

z-index가 없는 경우의 쌓임

모든 요소들에 z-index가 지정되지 않았을 경우, 쌓임 맥락이 생성되지 않았을 경우 요소들은 다음 순서로 쌓인다. (아래에서 위로)

1. 루트 요소의 배경과 테두리

• 루트 요소(일반적으로 <html>요소)의 배경과 테두리는 쌓임 맥락에서 가장 낮은 레이어로 간주한다.

2. 위치가 지정되지 않은 하위 요소

• position 속성이 static으로 설정된 요소
• root 요소 이후, 위치가 지정되지않은 요소들은 html에 나타나는 순서대로 쌓인다.
• 마지막에 나타난 것이 가장 위에 쌓인다.

3. 위치가 지정된 하위 요소

• position 속성이 static이 아닌 값으로 설정된 요소
• 나타난 순서대로 위치가 지정되지 않은 요소 위에 쌓인다.

(웹사이트에 렌더링되는 순서)

z-index가 있는 경우의 쌓임 "맥락"

z-index 속성을 사용하면 위에서의 쌓임을 무시하고, html 문서 상에서 먼저 나온 요소를 나중에 나온 요소보다 앞으로 나오게 할 수 있다.

브라우저는 z-index 속성값이 낮은 요소를 먼저 나타내고, z-index 속성값이 높은 요소를 그 다음에 나타내기 때문에 만약 요소가 겹쳐있을 경우 z-index 속성값이 큰 요소가 속성값이 작은 요소의 일부를 가리거나 전체를 덮을 수 있다.

z-index가 있는 경우의 쌓임 맥락은 예시를 통해 이해하는 것이 훨씬 빠르고 직관적이므로, 예시를 통해 알아보겠다.

/* html, z-index 설명에 필요하지 않은 마크업은 제외함 */
<div id="div1">
  DIV #1
  position: relative;
  <div id="div2">
    DIV #2
    position: absolute;
    z-index: 2;
  </div>
</div>

<div id="div3">
  DIV #3
  position: relative;
  z-index: 1;
  <div id="div4">
    DIV #4
    position: absolute;
    z-index: 10;
  </div>
</div>

/* css, z-index 설명에 필요하지 않은 속성은 제외함 */
#div2 {
  z-index: 2;
}
#div3 {
  z-index: 1;
}
#div4 {
  z-index: 10;
}

#div1,
#div3 {
  position: relative;
}

#div2 {
  opacity: 0.8;
  position: absolute;
}

#div4 {
  opacity: 0.8;
  position: absolute;
}

이 코드를 돌려보면 아래와 같은 결과값이 나온다.

여기서 의문인 점을 미리 정리해보자면

1. div1도 쌓임 맥락을 생성하는가?
2. div4의 z-index값이 div2보다 더 큰데 왜 div2보다 밑에 가려졌는가? 로 추려질 것 같은데, 하나하나 설명을 해볼 것이다.

먼저, div1은 쌓임 맥락을 생성하지 않는다. position은 relative이지만, z-index 값이 auto이기 때문이다. 따라서, div2는 div3과 같은 루트 요소의 쌓임 맥락에 속한다. 여기서 div2의 z-index 값이 div3보다 높기 때문에 div2가 div3 위로 쌓인다.

문제는, div4의 z-index 값이 div2보다 높은데 왜 div4가 div2 밑에 있는가? 이것이다. 그 이유는 애초에 쌓임 맥락 속 자식 요소의 z-index 값은 부모에게만 의미가 있기 때문이다. 그래서 div4의 z-index: 10; 또한, 부모인 div3에게만 의미가 있다. 만약 div4에 z-index를 9999로 주어도, 여전히 div2보다 밑에 있다.

div3은 div2보다 더 낮은 z-index값을 가지고 있기 때문에 div2 밑에 쌓이게 된 것이고, div4는 div3의 자식 요소이기 때문에, div4의 z-index값은 div2와는 아무런 연관이 없다.

이해가 좀 되었는가요..

mdn z-index mdn z-index 이해하기 mdn 쌓임 맥락 mdn z-index가 없는 경우의 쌓임 mdn 쌓임 맥락 예제

오늘은 z-index와 쌓임 맥락에 대해 알아보았다. 2차원 공간에서 요소들을 배치하다가 3차원 공간을 생각하다보니 머리가 깨질거 같았지만.. 나름 이정도면 이해를 잘... 잘...(한거 맞겠지?) ㅠㅠ....말잇못 안녕

먼저, 요소를 이동시키는 방법에는

1. 네거티브 마진
2. tranform: translateX(또는 Y) 값 부여하기가 있다. (이 외에도 있겠지만..) 오늘은 이 두 가지 속성 말고도, 요소를 이동시키는 속성인 position에 대해 알아보았다.

(* 1. 네거티브 마진과 transform의 차이점 : 네거티브 마진은 뒷 요소를 함께 끌고 이동하지만, transform은 속성이 적용된 요소만 이동한다.

* 2. translateX(또는 Y)에 퍼센트 값을 준다면 자기 너비의 퍼센트를 기준으로 요소가 이동된다.)

Position이란?

문서 상에서 요소를 배치하는 방법을 지정하는 CSS 속성 initial value: static, inheritance: no

지정값: relative, absolute, fixed, sticky 이 글에서는 static, relative, absolute에 대해 다뤄보겠다.

1. position: static

• position 속성의 기본값이며, 요소들이 html에 작성된 순서 그대로 브라우저 화면에 표시가 된다.
• 요소들이 배치될 때, 보통 좌->우(우횡서 방식일 경우 우->좌), 상->하 순으로 배치된다.
• top, left, bottom, right 속성값은 요소의 position이 static일 때엔 무시된다.

2. position: relative

자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋 거리만큼 이동한다.
현재 위치에서 상대적으로 이동하겠다는 개념

• 마진까지 포함해서 자기 공간은 그대로 두고, 시각적으로만 이동한다.

• 따라서 절대적인 위치 좌표를 표시하는 것이 아니다.

• relative 사용 예제

    .div {
            position: relative;
            left: 10px;
            top: 10px;
    }
  

  위 예시는 현위치(파란 화살표가 시작하는 지점)에서 left로 10px, top으로 10px 이동한다는 뜻이다. 결과:

3. position: absolute

position: static 속성을 가지고 있지 않은 조상을 기준으로 움직인다. 그렇지 않다면, 뷰포트를 기준점으로 시작한다.

• absolute가 부여된 요소는 공간을 차지하지 않는다.
• 절대적인 위치는 top, right, bottom, left로 조정한다.
• position: absolute가 부여된 요소의 최초 컨테이닝 블럭= 뷰포트
• 부모 또는 조상 요소에 position: static이 아닌 값이 적용되어 있다면, 컨테이닝 블럭은 부모 또는 조상 요소가 된다.
  • 따라서 absolute가 부여된 요소는 컨테이닝 블럭을 기준으로 이동한다.
  • 만약 부모와 조상 둘 다 position: static이 아니라면, 컨테이닝 블럭은 부모 요소가 된다. (자식 이기는 부모 없다고.. 부모 이기는 조상도 없는듯.. 못이기긴해)
• 마진이나 패딩값을 주어도 그 박스까지 함께 이동한다.
• absolute가 부여된 요소는 공간을 차지하지 않는다.
• 절대적인 위치로 이동해야하기 때문에 요소의 콘텐츠 만큼만 크기를 가진다. (-> 인라인 요소처럼 보이게 되는 이유)
• absolute 사용 예제

  /* html */
  <div class="grand-parents">
      <div class="parents"
      <img class="children" src="img.png">
    </div>
  </div>

  .grand-parents {
      position: relative;
  }
  .children {
      position: absolute;
      left: 10px;
      top: 10px;
  }

  위 예시는 컨테이닝 블럭인 .grand-parents를 기준으로 왼쪽 10px, 위쪽 10px의 위치로 이동된다. (.grand-parents가 컨테이닝 블럭이 된 이유: position: static이 아니므로) 결과:

position 속성이 요소를 이동시키는 것이라면, 가운데 정렬도 가능할까? 대답은 Yes다.

실험대상이 될 코드 ↓

  /* html */
  <div class="grand-parents">
      <div class="parents"
      <img class="children" src="img.png">
    </div>
  </div>

  .grand-parents {
      position: static;
      background-color: #bbb;
      width: 800px;
      margin: 0 auto;
      padding: 1px;
  }
  .children {
      width: 100px;
      height: 100px;
  }

위 코드의 결과 ↓

absolute로 가운데 정렬하기 ① (with transform)

이번 실험에선, 저 img 이미지를 할아부지의 정중앙으로 이동시킬 것이다. 그러기 위해 위 CSS 코드를 살짝 수정시켜 보았다.

  .grand-parents {
      position: static;
      background-color: #bbb;
      width: 800px;
      margin: 0 auto;
      padding: 1px;
      position: relative;
  }
  .children {
      width: 100px;
      height: 100px;
      /*추가*/
      position: absolute;
      left: 50%;
      top: 50%;
  }

(이렇게 수정한 이유: left와 top의 50%만큼 가면 가운데로 갈 수 있으니까라고 생각해서) 수정한 코드의 결과는? ↓ 아뿔싸! 정중앙(노란 점)을 기준으로 좀 더 오른쪽, 밑쪽으로 치우쳐져 보인다. (치우쳐진게 맞다) 이런 결과가 나온 이유는, 이미지가 자기 왼쪽 위(노란 점이 묻은 부분)를 기준점으로 이동하기 때문이다. 따라서 이 때엔 상단에 잠시 나온 translate를 이용하여 내 너비의 퍼센트만큼 다시 이동시킨다.

  .grand-parents {
      position: static;
      background-color: #bbb;
      width: 800px;
      margin: 0 auto;
      padding: 1px;
      position: relative;
  }
  .children {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      /*추가*/
      transform: translate(-50%,-50%);
  }

결과 ↓ 수직, 수평 가운데 정렬 완성!

absolute로 가운데 정렬하기 ②

transform 속성을 사용하지 않고도 할 수 있는 방법이 있다! 바로, top, right, ,bottom, left 속성에 0을 준 후 margin: auto; 값을 주는 것이다. 실험대상에 코드를 추가해보았다. 결과는?

  .grand-parents {
      position: static;
      background-color: #bbb;
      width: 800px;
      margin: 0 auto;
      padding: 1px;
      position: relative;
  }
  .children {
      width: 100px;
      height: 100px;
      /*추가*/
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
  }

결과 ↓ 실험 ① 보다 훨씬 간편하게 수직, 수평 가운데 정렬을 할 수 있었다. 하지만 이 방법은 top, right, ,bottom, left 속성이 0이어야 한다. 또한, 이동할 요소의 너비와 높이가 설정되어 있어야 한다.

만약 너비와 높이가 설정되지 않았을 때 top, right, ,bottom, left 속성이 0 이라면..?

  /* html */
  <div class="grand-parents">
      <div class="parents"
      <div class="children">멋사</div>
    </div>
  </div>

    .grand-parents {
        position: static;
        background-color: #bbb;
        width: 800px;
        margin: 0 auto;
        padding: 1px;
        position: relative;
    }
    .children {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: salmon;
    }

일 때 어떻게 될까? 위 사진처럼, 컨테이닝 블록을 기준으로 상하좌우로 늘어나서 마치.. 할아부지를 잡아먹은 것처럼 보인다.. ㅠㅠ (flex-grow와 비슷?) 사실은 컨테이닝 블록 안에서 사용 가능한 공간을 최대치로 채워주는 느낌이다..!

자투리 지식

position의 top, right, bottom, left을 사용하려면 네 줄의 코드가 필요하다. 이를 줄여주는 단축 속성이 있는데, 바로 inset 이다. (IE에선 사용불가!) 나는 솔직히 단축속성은 예시로 봐야 더 이해가 잘 되어서 예시를..ㅎ 보이며 이만 글을 줄입니다.

left: 20px;
right: 20px;
top: 10px;
bottom: 40px;
/* 이것을 inset으로 요약한다면 */
inset: 10px 20px 40px;
---
left: 0;
right: 0;
top: 0;
bottom: 0;
/* 이것을 inset으로 요약한다면 */
inset: 0;
---
left: 20px;
right: 40px;
top: 50px;
bottom: 30px;
/* 이것을 inset으로 요약한다면 */
inset: 50px 40px 30px 20px;

오늘은 position의 static, relative, absolute의 성질과, absolute일 때 요소를 가운데 정렬하는 것에 대해 배워보았습니다.

사실.. 다른 분들이 포지션 쓰실 때 보면서 '저거 뭔데 저렇게 남발하지???' '진짜 편한가보다....그래서 많이 쓰는갑네' 라고 생각했거든요..

근데 오늘 배우고 나니까 저라도 남발할 것 같다는 생각이 드네욧...ㅋㅋ 개인적으론 flex보다 더 편하게 요소를 이동시킬 수 있을거 같아서 flex와 position 둘 중 사용할 수 있는 상황이 온다면 잘 보고 position을 쓰도록 하겠습니다 ^^

이만 끝!

이 글은 CSS의 Flex 속성, 특히 flex의 개념과 flex-items에 지정하는 속성에 대해 주로 다루고 있습니다. flex-container에 지정하는 속성은 CSS flex(2) 게시글에서 더 자세히 다룰 예정입니다. 조금만 기다려주세욤 🙄

flex를 배우기 전까진 보통 세로로 배치하는 레이아웃을 이용했다. 예를 들어, ㅁ ㅁ ㅁ 이렇게... 그러나 이제 이 요소들을 ㅁ ㅁ ㅁ ㅁ 이렇게 배치하고 싶은 타이밍이 왔다.... inline 요소들은 흉내라도 낼 수 있지 block 요소는.. 흉내내다가 코드만 5m 정도로 길어질 수 있다.

하지만 이제는 그런 방법 없이 손쉽게 가로로 배치할 수 있다. 바로바로 flex에 대해 배웠기 때문 ^^ 시작합니다. flex 😎

Flex

display 속성 중 하나로, 박스 레이아웃을 작성할 때 유용하게 사용된다. 요소의 사이즈를 지정하지 않고도 유연하고 균형잡힌 배치가 가능하다.

• 선언 방법
  • 배치하고 싶은 대상의 직계 부모 요소에 display: flex;를 선언한 후, 부모 요소를 flex-container로 만들어 준다.
  • 배치하고 싶은 대상이 아니라, 직계 부모에게 속성을 부여함으로써 그 자식 요소를 flex 세상에서 태어나게 해준다.. (라고 생각하면 이해가 쉽죠?)
• Ex.

  /* 필요하지 않은 속성은 기술하지 않았습니다. */
  <div class="playground">
    <div class="frog">Frog</div>
    <div class="frog">Frog</div>
    <div class="frog">Frog</div>
  </div>

  이 코드를 실행시켜보면 위와 같이 나타난다. 잉잉.. 가로로 배치하는거 알려달라고 했잖아요 ㅡㅡ div는 block요소인데 어떻게 가로로 배치하는데요ㅡㅡ ㄴ 네 제가 보여드리겠읍니다.. flex 가보자고

.playground { display: flex; }

부모 요소인 .playground에 단 한줄... display: flex만 추가시켜주면.. 응애~ 자식들은 flex 세상에 태어나게 된다. 바로 아래처럼 드디어.. 가로로 배치가 가능해진 것이다..!!! 👏👏👏

여기서 질문할까봐.. 혹시나 말하는데 여전히 div.frog는 block-level 요소입니다.. (개인적으로 이게 가장 신기했삼..)

축하합니다.. 이제 당신은 flex의 반은 알게 되셨습니다. (시작이 반이니까요^^)

• flex 속성을 받은 부모와 자식요소는?
  • 부모: flex-container라고 부를 수 있게 된다.
  • 자식: flex-item이라고 부를 수 있게 된다. __ 이때, flex-item은 내부 콘텐츠보다 크기가 작아질 수 없다. 내부 콘텐츠만큼의 사이즈가 강제된다.__ __ 이때, flex-item은 내부 콘텐츠보다 크기가 작아질 수 없다. 내부 콘텐츠만큼의 사이즈가 강제된다.__ __ 이때, flex-item은 내부 콘텐츠보다 크기가 작아질 수 없다. 내부 콘텐츠만큼의 사이즈가 강제된다.__ (중요하니까 여러번 반복..)
    • 위의 예시에서는 flex-container: .playground flex-item: .frog 이다.
      

flex를 한마디로 말하자면 flex-container는 flex의 영향을 받는 전체 공간이 되고, 설정된 속성에 따라 각각의 flex-item들이 어떤 형태로 배치되는 것 이라고 할 수 있다. 그래서 아래에 나올 속성값들도 flex-item에 선언해야 배치를 할 수 있다. (flex-container에 적용을 해보았자 씨알도 안먹힙니다. ^^)

그래서 이제.. 어떻게 써야하나요?

1. flex-basis

flex-item의 초기 크기를 지정하는 속성 (원래 지 크기~!) initial value: auto, inheritance: No

• flex-basis는 요소 크기를 강제하지 않는다
• 값이 auto 일 때: 요소는 컨텐츠만큼의 영역을 가진다.
• flex-direction 속성 값에 따라 크기를 정하는 기준이 달라진다. (main-axis 기준으로 크기를 설정하기 때문이다.)
  • flex-direction: row -> 아이템의 너비(width)
  • flex-direction: column -> 아이템의 높이(height)

2. flex-grow

flex-item 요소가 flex-container 요소 속에서 차지한 영역(원래 자기 크기)을 제외한 사용가능한 공간을 비율로 분배하여 원래 자기 크기에 추가한다. initial value: 0, inheritance: No

• flex-container의 남은 공간을 flex-item이 얼마만큼의 비율로 채울 수 있게 할지 결정하는 속성이다.
• 속성값은 숫자 단독으로만 사용한다. : 비율로 분배하는 것이기 때문, 당연히 음수값은 사용하지 않는다.
• Ex. flex-grow: 2;의 의미 : 자기 영역을 제외한 사용 가능한 공간을 2만큼 균등하게 분배하여 원래 자기 크기(basis 값)에 그 비율만큼 추가된다.

flex-basis: 0과 auto의 차이점

이런 코드가 있다.

<div class="playground">
    <div class="frog">Frog</div>
    <div class="frog">Frog</div>
    <div class="frog">Frog</div>
</div>

/* 설명에 불필요한 속성들은 제외함 */
.playground { display: flex; }
.frog         { flex-grow: 1; }

이 코드에서, 우리는 flex-basis 값에 따라 요소가 어떻게 변하는가에 대해 살펴볼 것이다.

flex-basis: auto (기본값)일 때와 0일 때, 위 코드를 실행시켜보면 아래와 같은 결과가 나온다.

그런데, 만약 요소 속 콘텐츠의 크기가 커지면 어떻게 될까?

1. flex-basis: auto 일 때

2. flex-basis: 0 일 때

차이가 느껴지는가? 왜 이런 결과가 나왔을까?

flex-basis: auto일 때엔 flex-item의 기본 크기=자신의 콘텐츠만큼 가지게 된다. flex-grow: 1에 따라 세 아이템 모두 같은 여백을 나눠가지지만, 원래의 자기 콘텐츠+나눠진 여백만큼을 자기가 가지므로 서로 다른 크기를 가지게 된 것이다.

flex-basis가 0일 때엔, 애초에 아이템의 기본 크기를 0이라고 지정한 것이므로 원래 자기 콘텐츠=0 이다. 따라서, 0+동등하게 나눠진 여백의 결과값으로 서로 동일한 너비를 가지게 되었다.

이렇게 보니 이해가 가시는지요.. 저는 이해를 못해서 몇 번 힘들었습니다 ^^ㅎ

3. flex-shrink

flex-grow와 반대로, flex-item의 너비를 감소시키는 비율을 설정한다. initial value: 1, inheritance: No

• flex-shrink: 0;: 줄어들지 않음, 수축 가능성 X
• flex-basis로 크기를 정해두었어도 고정된게 아니기 때문에, 크기가 변할 수 있다. 이때 flex-shrink: 0을 선언하면 원하는 크기대로 고정할 수 있다.

알아두면 좋을 속성

min-width

요소에 보장되는 최소 너비를 설정한다. initial value: auto, inheritance: No

• 쉽게 말해, min-width: 100px로 설정해놨다면 "니가 100px까지 줄어드는건 허용해줄게. 근데 그 미만은 안돼!!" 라는 의미이다.
• 자식 요소의 이미지 크기가 커졌을 때, 부모 요소의 너비도 같이 커지는 상황에서 부모 요소에 min-width: 0; 값을 주게 되면 이 상황을 해결할 수 있다.
• min-width 속성을 사용한다면, 부모 요소 크기는 콘텐츠의 크기보다 작아질 수 있다.
• 보다 더 효과적으로 사용하기!
  1. flex-basis를 이용하여 내가 원하는 레이아웃을 갖춘 후, flex-shrink 속성을 이용해 줄어드는 비율을 0으로 맞춰준다.
  2. 최종적으로 min-width로 내가 원하는 너비를 강제해준다.
• flex-shrink나 flex-grow 속성은 무시하고 적용된다.
• flex-item의 width값(flex-direction: row일 때) : flex-basis+min-width

하.. 오랜만의 벨로그다 (일주일만인가) 요새 flex 이넘때문에 과제하느라 시간이.. 너무 후딱가고 적용할 때마다 왜이런거지? 이해하는데 시간이 오래걸려서 블로그를 쓸 새가 없었다.. (주말엔 피곤해서 그냥 쓰러짐.. 죄송 🙄) 오늘은 겨우겨우 과제 완성해서 벨로그 적었지롱 ㅋㅋ 아무튼 다시 이번주부터 힘내서 flex 2탄도 써야지... 화이팅 ㅠㅜㅠㅠㅠ 플렉스에 무너지지말자... 정복하자 이넘도

inline 요소 또는 table-cell box에서의 수직 정렬을 지정하는 속성 inline-block을 포함한 모든 inline 요소의 수직 정렬을 위해 사용된다. initial value: baseline, inheritance: No.

vertical-align은 특징

• block-level 요소의 수직 정렬에는 영향을 미치지 않는다.

inline 요소엔 baseline이라고 하는 기준선이 존재한다. 따라서 inline 요소는 이 베이스 라인을 기준으로 배치된다. vertical-align에 baseline 값을 줬을 때, 부모의 기준선에 맞추어 해당 요소의 기준선을 정렬해준다.

속성값 (initial: baseline)

• length: 요소의 길이만큼 올리거나 내린다. 음수값도 사용 가능 (px 값 사용 시엔 baseline을 기준으로 이동한다.)
• % : 요소를 line-height 기준으로 이동, 음수값 사용 가능
• top: 요소의 맨 위를 줄에서 가장 큰 요소의 맨 위 위치에 맞춘어 정렬한다.
• middle: 요소를 부모의 중앙지점에 정렬한다.
• bottom: 요소의 맨 아래를 줄에서 가장 낮은 요소에 맟추어 정렬한다.
• 이 외에도, sub, super, text-top, text-bottom 이 있다.

자투리 지식

1. letter-spacing 속성은 em단위로 쓰는 것이 좋다.
2. letter-spacing에 값을 크게 주게 되면 자간이 넓어 그만큼 글자가 오른쪽으로 쏠리는 현상을 볼 수 있다. 그래서 text-indent (들여쓰기 속성) 값을 똑같이 주게 되면 내가 원하는 모습을 볼 수 있다.
3. background-image vs img 태그 하다보면 이미지를 배경 이미지로 넣을지, 아니면 이미지 요소로 넣을지 고민하게 되는 순간이 있다. 저번에도 언급했었지만, 이 둘을 구분하는 기준은 내가 넣고자 하는 이미지가 비교적 단순한 데코용이냐, 아니면 정보를 담고있느냐에 따라 달라진다. 단순한 데코용이라면 background-image를 이용해 이미지를 삽입하고 의미있는, 또는 전달이 필요한 정보를 담고 있는 이미지라면 img 마크업으로 넣는 것이 접근성 차원에서 용도에 맞게 사용한다고 볼 수 있다.

느낀 점

오늘 flex 속성에 대해 배우게 되었다. 하지만 오늘 내용으로 담기엔 내가 이해를 제대로 못한 것 같아서, 더 깊게 배우고 나서 글을 포스팅할 것이다! 그래서 오늘은 내용이 역대급으로 짧다..ㅎㅎ

안녕.

시작!

CSS에서 Cascading에 대하여

cascading: _ _'위에서 아래로 흐르는, 상속 또는 종속하는' __의 의미를 갖고 있다.

CSS(Cascading Style Sheet)에서의 Cascading은 무엇이냐...

선택자에 적용된 많은 스타일 중, 어떤 스타일로 브라우저에 표현할지 결정해주는 원리

라는 의미를 갖고 있다.

만약, 어떤 선택자에 속성(상속이 가능한)값 A를 적용했다고 치자. 그런데 어쩌다보니 그 선택자의 부모 요소에 속성값B를 주게 되었다.

<div style="color: blue;">
    <h1 style="color: black;">멋사</h1>
</div>

h1은 div의 하위 요소이며, div에 적용된 스타일은 상속이 가능한 스타일이므로, 하위 요소에 적용이 된다. ( -> 사실 이것도 cascading 규칙임) 그러나 하위 요소인 h1에도 스타일이 따로 적용되어 있다. 이런 상황에서, h1은 어떤 색을 갖게 될까? 그리고 h1이 그 색을 가지게 된 원리는 무엇일까? 를 다루는 것이 바로 cascading이라는 것이다 큼큼..

즉, 한 요소에 중복된 스타일을 주게 되었을 때, css가 스타일을 순차적으로 적용하게 되는 규칙을 cascading이라고 한다.

cascading은 다음 2가지의 원칙을 통해 어떤 요소에 스타일을 적용할지 결정한다. 1. 스타일 우선순위 2. 스타일 상속

그리고, 스타일 우선 순위는 다시 중요도, 명시도, 코드 순서의 3가지로 나뉘어진다.

오늘 글에서는 순차적으로 다뤄보도록 하겠다.

1. 스타일 우선순위

중요도

CSS가 어디에 선언되어 있는가? 스타일이 선언된 위치에 따라 우선순위를 매기는 것

스타일 시트는 제작자(author), 사용자(user), 사용자 도구(user agent, 대표적으로 브라우저)가 작성한 세 종류로 나뉜다. 이 중 가장 중요도가 높은 것은 작성자의 CSS 파일이며, 각 스타일 시트의 우선순위는 아래와 같다.

사용자 스타일 시트 > 제작자 스타일 시트 > 사용자 도구 스타일 시트

• 사용자 스타일 시트
  • 특별한 조건이 필요한 최종 사용자가 그들의 필요에 맞게 구성해둔 스타일 시트
  • Ex. 저시력자라면 윈도우의 '고대비' 설정을 지정

  • 그 설정의 스타일이 시스템에 저장된다. 이 때의 스타일을 사용자 스타일 시트라고 한다.

  • 사용자가 시스템에 저장한 스타일이기 때문에, 웹페이지 제작자가 스타일을 제어할 수 없다.
• 제작자 스타일 시트
  • 웹 문서를 개발한 사람이 설정한 스타일, CSS 파일이나 HTML 내의 스타일로 선언된 것들을 말한다.
  • 제작자 스타일 시트 내에서의 우선순위
    1. <head>의 <style>
    2. <head>의 <style> 내의 @import (다른 스타일 시트에서 스타일 규칙을 가져올 때 사용한다.)
    3. <link>로 연결된 CSS 파일
    4. <link>로 연결된 CSS 파일 내의 @import
  • !important 스타일 시트
    • !important 가 적용된 스타일 시트의 중요도
      1. !important 사용자 스타일 시트
      2. !important 제작자 스타일 시트 속 !important 스타일
      3. 사용자 스타일 시트
      4. 제작자 스타일 시트
      5. 사용자 도구 스타일 시트
    • !important는 저번 시간에 배웠는데, 찾아보니 명시도보단 중요도에 더 가까운 것 같아 다시 수정하게 되었다.
      • 제작자가 스타일 시트에 스타일을 만들 때 속성값 뒤에 !important 라고 써 둔 것을 말한다.
      • !important를 붙이게 되면 다른 일반 스타일보다 최우선해서 적용된다.
      • !important는 명시도에 직접적인 영향을 끼친다.
      • 남용하면 안됨! -> cascading이 복잡해져 디버깅이 어렵다..ㅠㅠ
• 사용자 도구 스타일 시트 (브라우저의 User Agent 스타일 시트)
  • 브라우저들마다 기본적으로 지정하고 있는 스타일 시트

셀렉터 명시도 (Selector Specificity)

하... 솔직히 제일 화나는건, 저 specificity의 해석 때문이었다. 어디선 명시도라하고 어디선 적용범위라고 하고.,...으아악!! 아무튼 진정하고, 다시 정리하겠다. 뭔가 적용 범위라고 하는 것이 더 이해에 쉬울 것 같아, 명시도라는 단어 대신 적용 범위라고 하겠습니다. (어려운 한자보단 눈에 익숙한게 좋으니까)
중요도가 같을 경우, 스타일은 셀렉터가 얼마나 구체적으로 적용 범위를 지정하는 가?의 영향을 받게 된다. (단계적인거 확 느껴지쥬? 이것이 바로 cascading) 그래서 적용 범위가 우선순위에 어떤 영향을 준다는 것인가?

스타일 적용 범위가 좁을수록 우선순위가 높다.

즉, 셀렉터가 가리키는 것이 명확할수록 우선순위를 높게 준다는 것이다. 모호하게 여러 요소를 가리키는 셀렉터보다는, 적은 범위를 명확하게 가리키는 셀렉터 스타일의 우선 순위가 더 높다.

우선순위가 높은 범위는 아래와 같다.

1. 인라인 스타일

• html 마크업에서 inline으로 바로 css를 넣어주는 것
• 즉, 태그 안쪽에 style 속성을 사용해 적용한 스타일
• 하나의 태그 내에서만 적용되기 때문에 높은 우선 순위를 갖는다.
• Ex. <h1 style="color: blue;"> content </h1>

2. id 선택자

   • id는 문서 내에서 한 번만 사용할 수 있으므로 비교적 좁은 범위를 가지게 된다.
   • Ex. #h1 {property: value;}

3. class 선택자, 속성 기반 선택자, 가상 클래스

   • 여러 번 쓰일 수 있기 때문에 id보다는 넓은 범위를 갖는다.
   • Ex.
     • .class {property: value;}
     • a[href="https://veamcamp.com"]
     • :hover {property: value;}

4. 태그 선택자, 가상 요소
   • 문서 내 모든 태그를 가리키기 때문에, 범위가 제일 넓다.
   • Ex.
   • h1 {property: value;
   • ::before

* 그리고, 결합자는 적용 범위에 영향을 끼치지 않는다. 왜인지는... 모르겠다. 규칙이니까 그냥 이해하는 수 밖엔..

그리고 명시도를 점수화(specificity calculator 라고 한다.) 하여 보여주는 사이트가 있는데, 한 번 참고해보시길! https://specificity.keegan.st/

코드 순서

중요도를 거르고.. 적용 범위까지 걸렀는데.. 어라라 그래도 남은 넘들이 있네...? 중요도와 적용 범위 둘 다 같은 아이들.. 이 넘들은 우짭니까?! 를 결정하는 것.. 바로 ,코드 순서이다.

코드에서 가장 마지막에 등장한 속성을 최우선으로 적용한다. 이때, 나중에 작성한 스타일이 앞서 작성된 스타일을 '덮어쓰기' 한 형태로 적용된다.

만약,

h1 { color: black; }
h1 { color: blue; }

라는 상황을 가정해보자. 이때 h1은 한 문서 내에 있기 때문에 중요도도 같고, 적용 범위까지 같다.

이런 경우에는, 코드 순서에 따라서 나중에 작성한 스타일을 적용한다. 즉, h1은 파란색이 나오게 되는 것이다.

더 구체적으로 보자면, h1은 검은색이라는 스타일을 먼저 적용 받은 후 나중에 선언된 파란색이라는 스타일로 덮어씌워진 것이다!

2. 스타일 상속

태그들이 어떻게 포함되었는가?에 따라 스타일을 적용할지 결정하는 원칙

태그의 포함 관계에 따라 요소들은 부모와 자식, 혹은 조상과 자손 요소로 구분할 수 있다.

CSS에서 별도로 스타일을 지정하지 않으면, 부모 요소에 있는 스타일 속성이 자식, 자손 요소로 자동 전달된다. 상속 가능한 속성만 상속되는 것이며, 모든 속성이 상속된다는 말이 아니다!!

만약 다음과 같은 코드가 있다고 치자.

<div>
        <h1>안녕<hi>
</div>

h1은 div와 부모와 자식 관계이다. 이때, 상속이 가능한 color 속성으로 div에 color: red; 스타일을 주게 되면 h1 요소는 div에게 color 값을 상속받아 red 값이 적용된다.

이것이 스타일 상속이다.

하... 드디어 cascading을 정복한 것 같다. 이렇게 한 주제에 대해 정리는 처음 해보는 것 같은데, 재미있다..

평소 쓰던 TIL은 살짝 여러 주제에 대해 찍먹하는 느낌이었는데, 이번엔 cascading에 대해 아주아주 심도있게 다룰 수 있어서 좋았다.

끝!

웹페이지를 꾸미려고 작성하는 코드 html과 같은 실제 프로그래밍 언어도 아니고, 마크업 언어도 아닌 stylesheet 언어이다.

css는 html 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다. 그렇다면.. css는 어떤 기준으로 어떤 요소들을 선택해서 어떻게 적용시키는 것일까? 오늘은 '어떤 기준으로 어떤 요소들을 선택하느냐에 대한 해답'인 명시도에 대해 다뤄보았다.

셀렉터 명시도 (Selector Specificity)

웹브라우저가 셀렉터의 구조를 파악하여 구체적인 정도를 기반으로 적용 우선순위를 결정한다.

1. 특징

• 주어진 CSS 선언에 적용되는 가중치로, 일치하는 선택자 내의 각 선택자 유형의 수에 의해 결정된다.
• 여러 선언의 명시도가 같을 때: CSS에서 맨 끝에 오는 선언이 요소에 적용된다.
• 같은 요소가 여러 선언의 대상이 되는 경우에만 적용된다.(선언 내부의 property가 겹칠 때!)
• 직접 대상 요소에 선언했을 때엔, 요소가 부모로부터 상속받는 규칙보다 항상 우선한다.

vs code에서는 명시도를 바로 볼 수 있다. css에서 셀렉터 위를 호버하면 작은 창이 뜨는데, 그 창 속에 명시도 (0,0,0)가 나타난다.

• ( 0, 0, 0 ): 차례로 금, 은, 동 순위라고 생각하면 좀 더 이해가 쉽다.
  • Ex. (0,1,0) vs (0,0,1) 둘 중에선 전자가 더 우선된다.
  • 은메달이 5천개여도 금메달 1개는 못이기듯, 선택기 특이성도 마찬가지로 생각하면 된다.
  • 선택자 우선순위를 계산할 때 기본적으로 결합자는 영향을 끼치지 않지만, 결합자마다 다르기 때문에 사용하기 전에 확인을 하고 사용하는 것을 권장한다. 결합자는 명시도 점수에 영향을 끼치지 않는다!

2. 예시와 설명 Ex 1. 위 상황에서는 .red 선택자에 color와 border-color가 적용되지 않는다. 왤까?

• 강도가 높은 셀렉터를 많이 사용할수록 명시도가 높아져 적용 우선순위가 높기 때문이다.
• 해결 방법: .red를 .colors .red나 .colors.item.red로 바꿔주면 적용되는 모습을 볼 수 있다.

Ex.2

/*아래는 위 css의 적용대상이 되는 html 마크업이다 */
<h1 class=wow wow2>contents</h1>

위 상황에서는 .wow:hover가 나타나지 않는다. 왜일까?

• 명시도가 같을 때엔 CSS에서 맨 끝에 오는 선언이 요소에 적용되기 때문이다.
• 가상클래스도 class이기 때문에 :hover 또한 클래스 취급해서 명시도가 같다는 것이다.
• 해결 방법: .wow:hover 셀렉터를 끝으로 내려서 .wow:hover가 맨 끝에 오는 선언으로 만들면 된다.

3. 우선순위에 대하여

• 1순위: !important
  • Ex. h1 { color: blue !important; }
  • !important 끼리 있다면: 그 중 명시도가 더 높은 것이 우선된다.
• 2순위 : html 마크업에서 inline으로 바로 css를 넣어주는 것(인라인 스타일)
  • Ex. <h1 style="color: blue;"> content </h1>
• 3순위: id 선택자
  • Ex. #h1 {property: value;}
• 4순위: class 선택자, 속성 기반 선택자, 가상 클래스, 가상 요소 등
  • Ex.
    • .class {property: value;}
    • a[href="https://veamcamp.com"]
    • :hover {property: value;}
    • ::before
• 5순위: 태그 선택자
  • Ex. h1 {property: value;
• 꼴찌: 전체 선택자 *
  \* 멘토님께서 명시도를 그림으로 나타낸 사이트를 알려주셨다. 덕분에 더 쉽게 이해가 되었다. 아래에 첨부합니다. https://specifishity.com/

line-height 속성

글 사이의 간격(행간)을 조정하는 속성 initial value: normal, inheritance: yes

• line-height: normal일 때: 한 줄의 높이가 폰트 종류에 종속적이다. 그러나 값을 정해주고 나면, 줄 높이가 고정되어 폰트 종류가 바뀌어도 줄 높이는 바뀌지 않는다.
• Half Leading Area를 통해 줄 높이가 조정된다.
  • 그러니까, 폰트 크기+half leading 영역= line-height
• line-height는 텍스트 한 줄마다 적용되는 것이기 때문에, 만약 두 줄의 텍스트에 적용한다면 참사가..
• line-height: 1;: 폰트 사이즈와 줄 높이가 같아진다.

자투리 지식

1. img에는 되도록 class 선언을 권장: 워낙 img를 쓸 일이 많음
2. :has 가상클래스
   • Ex. div:has(:hover) {property: value;}의 의미 : div에 hover 했을 때 property가 적용된다.
   • 그러나 IE에서는 사용 불가
   • 좀 더 빨리 알았다면 더 완성도 높은 과제를 제출했을 것 같은데.. 잉잉
3. ::before

• css 차원에서 마크업을 추가할 수 있는 가상 요소
• html에서 마크업을 또 하게 된다면 문서가 지저분해지니까..(?) 사용하는 것이 가독성 면에서는 더 좋을 것 같다.

4. overflow: hidden

• 과제할 때 border-radius 값을 header랑 footer에 각각 준 사람 바로 저에요^^
• 부모 요소에 overflow: hidden; 을 주게 되면 자식 요소가 부모 요소 밖으로 넘쳐 흐른 것을 숨겨준다.

5. <nav>

• 웹 사이트의 메뉴 구성은 주로 <ul>, <li>를 사용했었으나, 이것만으로는 해당 요소가 웹사이트의 네비게이션이라는 뜻으론 충분하지 않다!
• 따라서 사용하게 된 태그가 최근에 추가된 <nav>이다.
• 이는 해당 요소가 웹사이트의 네비게이션이라는 의미를 더 명확하게 한다.

6. background-image 고정하기

• background-attachment: fixed;하면 고정된다.
• 지난 과제에서 적용하지 못했는데 오늘 알게 되어서 햄복했듬 ^^ (대충 아저씨가 속이 파랗게 풀리는 짤)

느낀점

오늘 처음 CSS가 어떤 단어의 약자인지 알게 되었다 ㄷㄷㄷㄷ 아니... 진짜.... 왜 이때까지 찾아볼 생각을 안했지?ㅋㅋㅋㅋ 가끔 마우스를 잘못 뒀을 때 선택기 특이성 창이 코드를 가릴 때가 있어서 에잉 성가셔! 했었는데 왜 적용이 안되나 볼 때... 아주 유용하겠다고 생각하자마자 써먹게 되었다 ㅎㅎ 오늘 과제에서 코드에 문제가 없는데! 적용이 안되어서 이상하다 생각하고 혹시몰라 확인해봤더니 정말 명시도가 같아서.. 순서에 따라 아래에 적은 값이 적용이 되어서 내가 원했던 윗 값은 적용이 되지 않은 것이었다 ㄷㄷㄷㄷ 오늘 안배웠으면 진짜 평생 모를뻔........

그리고 overflow: hidden 이 자식!!!!! 배경 이미지 고정하는 속성도!!!! 드디어 알게되어 너무너무너무너무너무너무 행복한 하루였다.

오늘 적은 것 외에도 짤막짤막하게 많은 것들이 나왔었는데, 뭔가 길게 설명을 안해주신 것을 보아하니 아... 지금 내 수준에서는 그렇게 깊게 안파도 되는 아이구나...(나의 이해도가 딸리니까)하는 생각에 정말 깊게 파지 않았다. 이러면 안되는데........................... 사실 오늘 정리한 것도 머리에 넣기 힘들었기 때문에.. 정말 필요한 날에......다시 공부를....... 이러면 안되지만....................... 어쨌든

끝~! (발랄)

1. div 태그

• html에서 div요소는 플로우 콘텐츠를 위한 통용 컨테이너
• CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 영향을 주지 않는다.
• 보통 다른 요소 여럿을 묶어 clss나 id 속성으로 꾸미기 쉽도록 돕는다
• <div>contents</div>

• 특징
  • CSS로 꾸미기 전엔 콘텐츠나 레이아웃에 아무 영향을 주지 않는다.
  • 의미가 없는 순수 컨테이너로서, 아무 것도 표현하지 않는다.
  • 문서의 특정 구역이 다른 언어임을 표시하는 용도로 사용한다.
  • 시각적인 영역을 나누는 것에 사용한다.
    
• 잠깐, 플로우 콘텐츠란?
  모든 html 요소는 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한가지 이상에 속한다. 콘텐츠 카테고리는 느슨한 관계로, 서로 간에 어떤 관계를 형성하진 않으나 카테고리에서 공유하는 동작이나 관련 규칙을 정의하고 설명할 때 도움이 된다. 요소가 아무런 카테고리에도 속하지 않는 것 역시 가능하다. 콘텐츠 카테고리의 유형에는 메인 콘텐츠 카테고리, 폼 관련 콘텐츠 카테고리, 특정 콘텐츠 카테고리가 있다. 플로우 콘텐츠는 메인 콘텐츠 카테고리에 속하는 콘텐츠이다. 메인 콘텐츠 카테고리는 여러 요소가 서로 공유하는 일반적인 콘텐츠 규칙을 설명한다. 플로우 콘텐츠 카테고리에 속한 요소는 보통 텍스트나 내장 콘텐츠를 포함한다.

위는 메인 콘텐츠 카테고리를 도식화한 것으로,div 요소는 플로우 콘텐츠를 위한 통용 컨테이너이자 플로우 콘텐츠에 속한다.

하지만 우리는 저번 시간에 의미 없는 태그를 남발하는 것보단 의미 있는 태그를 사용하는 것이 더 권장된다는 것을 알게 되었다. 무조건 의미없는 div만 고집하지 않아도 된다 의미없는 태그를 사용하기 보단 영역을 나눌 땐 section 태그를 사용하는 것이 더 좋을 수 있다.

2. section 태그

• html 문서의 독립적 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.

• 보통 제목을 포함하지만 항상 그런 것은 아니다.

  • <section>contents</section>

• 특징

  • 요소의 콘텐츠를 따로 구분해야 할 필요가 있다면 <article> 태그를 고려할 수 있다.
  • 단순한 스타일링이 목적이라면 <div> 태그를 사용하는 것 추천
    • 문서 요약에 해당 구획이 논리적으로 나타나야 한다면 <section> 사용 추천

Class 이름 작명

저번 글에서 잠깐이지만, BEM에 관해 언급한 적이 있다. 오늘은 그것에 대해 더 자세히 다루는 시간을 가졌다. 나는 class 이름을 선언할 때, 내부의 콘텐츠를 기준으로 줄여서 사용했었다. 그런데 만약 내부에 있는 콘텐츠가 달라진다면? 이란 질문을 들었을 때, 아.... 그럼 달라질 때마다 class 이름을 바꿔야겠구나... 라는 생각이 들었다. 따라서 오늘 글에서는 어떻게 class 이름을 작명하는게 좋을지 다뤄보겠다!

1. 좋은 class 작명하기

• 콘텐츠에 종속성이 있는 이름을 사용하기보단, 일관성 있는 이름을 사용한다. : 내부의 콘텐츠를 기준으로 사용한다면 확장성이 떨어지므로, 일반적으로 통용되는 이름 사용을 권장한다.

• class 명의 시작에 숫자 기입은 되지 않는다.

  <div class="1a">멋사</div> /*불가*/
  <div class="a1">최고</div> /*가능*/

  (근데 이모지는 된다는 사실이 신기했다..ㅋㅋ 그치만 사용이 되어도, 되도록 사용하지 않는 것을 권장한다.

• 되도록 템플릿 개념으로 접근해서 일반적인 유형으로 작성한다.

• 알아보기 쉬운 이름으로 작성한다. : 너무 짧은 이름이나 약자는 알아보기 어렵다.

• 나름의 규칙을 생각하며, 근거 있게 작성하는 것이 가장 바람직하다.

  
  

2. BEM (Block Element Modifier) 방법론

• 항상 영어 소문자만을 사용. 카멜 케이스 등은 사용하지 않는다.
• 일반적으로 한 요소는 하이픈으로 연결 (Ex. input-text, button-submit, modal-alert 등)
• 네이밍의 조합: 형태-의미-순서-상태 순으로 사용 (Ex. button-submit-03-disable)
• 언더바는 파일, 폴더, 이미지 등에만 사용 (Ex. image_elysia_asset_01.png)
• 숫자를 사용할 때엔 확장성을 고려해 01, 02,... 혹은 001, 002,... 처럼 사용한다. 앞에 0을 붙이지 않으면 이미지 정렬 시 1다음 2가 오지 않고 10이 오는 것처럼 정렬 순서가 엉망이 될 수 있다.
  ### 3. 케이스 스타일 - 카멜식 (Camel case): 낙타의 모양에서 따온 방법
• 첫 단어는 소문자로 시작하고, 두 번째 단어부터 대문자로 시작한다.
• 단어와 단어 사이는 붙여 쓴다.
• Ex. mainActivity.java, errorLog.txt 등
  • 케밥식 (Kebab case): 케밥이 꼬챙이에 꽂힌 모습에서 생긴 방법
• 모든 단어가 소문자로 시작한다.
• 단어와 단어 사이는 -로 연결된다.
• Ex. main-activity.java, error-log.txt 등
  • 파스칼식 (Pascal case)
• 카멜식과 비슷하지만, 파스칼식은 첫 단어도 대문자로 시작한다는 점에서 차이가 있다.
• 몇몇 언어의 경우 관습적으로 클래스명만 대문자로 시작하는 암묵적인 규칙이 있어 조심해야 한다.
• Ex. MainActivity.java, ErrorLog.txt 등
  • 스네이크식 (Snake case): 뱀처럼 길게 이어진다.
• 케밥식과 유사하지만, 각 단어가 -가 아니라 _로 연결된다.
• Ex. main_activity.java, error_log.txt 등

Box-shadow 속성

• 선택한 요소에 그림자 효과를 만들어주는 속성

• initial value: none, inherited: no

• 문법

  box-shadow: none; /*그림자 효과를 없앰 */
  box-shadow: x-position y-position blur spread color;
  /* x-position: 가로 위치, 양수면 오른쪽, 음수면 왼쪽에 그림자
  y-position: 세로 위치, 양수면 아래쪽, 음수면 위쪽에 그림자
  blur: 그림자를 흐릿하게, 값이 클수록 흐려짐
  spread: 양수면 그림자 확장, 음수면 축소
  color: 그림자 색 */
  box-shadow: inset; /* 그림자를 요소의 안쪽에 만듬 */

이때까지 나는 요소의 영역을 나타내기 위해서 background-color를 사용해서 나타냈다. 오늘 수업에서는 요소의 영역을 나타내기 위해서 box-shadow 속성을 사용했었는데, 이 때 이 속성에 대해 처음 알게 되었다. (신세계) box-shadow: inset 0 0 10px black;으로 사용했었던 것 같은데 (맞나?) 요소 안으로 그림자가 생기니까 확실히.. 공간을 차지하지도 않고 (이건 백그라운드 컬러도 마찬가지지만) class명이 같아도 콘텐츠 영역마다 적용이 되어, border나 background-color보다 영역 구분을 보기가 편했다.

Ex. (이건 마진 병합 현상 설명할 때 쓰려한 자료인데.. 중복으로 사용좀 해야겠다. 파란 동그라미는 무시해주세욤 ^^. 아무튼 저 section1,2는 class명이 section으로 같은 요소들인데 확실히 좀 더 구분이 가는게.. 느껴지는가..? background-color로 사용했을 때엔 같은 색으로 표현이 되어 구분이 확실히 가지 않았었지만 box-shadow는 지 요소 안으로 그림자가 져서 같은 class명을 가지든말든, 같은 색의 효과를 주든 훨씬 잘 보이는게 너무 마음에 들었다!)

이 기능을 이제 알게 되다니.. 덕분에 과제할 때 좀 더 뚜렷하게 영역 확인을 할 수 있었다. 앞으로도 계속 써야겠다!!

마진 병합 현상 Margin Collapsing

CSS에서 인접하는 block-level element의 상하단 margin이 서로 병합되는 현상

• 자연스럽게 보일 수 있도록 하는 것

• 조건

  • block-level 요소여야 적용된다. (inline이나 inline-block은 적용 X)
  • 인접해있는 block 요소의 상하단 마진만 겹친다. (좌우 마진은 겹치지 않는다.)

• 부모 자식 요소 관계에서 마진 병합 현상

  • 아래 코드에서 ① 부모 자식 요소 간 인접해있고, ② 둘 다 block 요소이기 때문에 마진 병합 현상이 일어난다.
  • body도 block 요소이기 때문에, body와 parents 사이 마진 병합이 일어난다.

    <body>
    <div class="parents">
        <div class="box">A</div>
        <div class="box">B</div>
    </div>
    </body>

    

• 마진 병합 현상을 피하는 방법

  • CSS에서, 인접한 블럭 요소 중 첫 블럭 요소 이름:first-child를 입력하고 margin에 큰 값을 부여한다. -> 사실 이 방법은 마진 병합 현상이 일어나지 않게 하려는 것이 아니라, 시각적으로만 마진 병합 현상이 일어나지 않은 것처럼 된다. Ex.

    /*HTML*/
    <main class="contents">
    <section class="section">section1</section>
    <section class="section">section2</section>
    </main>

/*CSS*/
.section {
    background-color: blueviolet;
    box-shadow: inset 0 0 30px white;
    margin: 20px;
    padding: 20px;
} 
/* 여기서 끝나면 마진 병합 현상 일어남 */

.section:first-child {
    margin-bottom: 40px;
}
/* 마진 병합 현상 회피~ */

Ex.

• • 마진 병합 현상이 일어나는 블록 요소 사이에 table 요소를 넣는다.

    • 인접한 block 요소 사이에서 발생한다는 마진 병합 현상의 조건에 맞지 않기 때문에 (table은 table 요소이다.)
      • 그러나 내용 없이 시각적 목적의 html 마크업이기 때문에 사용 지양하는 것이 좋음

  • 경계면에 공간을 차지하고 있는 요소를 삽입한다.

    • ex. border나 padding 값을 주게 되면 마진 병합 현상이 일어나지 않는다. : 부모의 마진과 자신의 마진 사이 경계면이 생기게 되기 때문이다.
    • Q. 마진 병합 현상이 일어나는 블럭 요소 사이에 빈 div(display: inline; 으로 바꾼)을 넣어도 마진이 안겹칠까요? A. div에 콘텐츠가 없기 때문에 (속성을 inline으로 바꿨으니까) 마진 병합 현상이 일어납니다.

  • 부모 요소에 display: flow-root; 값을 주게 되면 마진 병합 현상이 일어나지 않는다.

    • Q. 부모 요소가 아니라 서로 인접한 형제 요소들이라면 첫 번째 형제 요소에 display: flow-root; 값을 주면 되나요? A. 아니오. flow-root 또한 block 계열 속성이기 때문에 여전히 마진 병합 현상이 일어납니다.

  • overflow 속성의 값이 visible이 아니라면 마진 병합 현상이 일어나지 않는다.

  • 강사님과 멘토님의 방법

    • margin-bottom 으로 쓰고 :last-child로 맨 마지막 요소를 선택한 후, margin-bottom: 0;을 많이 사용하신다고 하셨다.

  * 솔직히 마진이 겹치는 줄도 몰랐는데, 이 현상에 대해 알고나니 보였다 ㅎㅎ..ㅋㅋ CSS에서 정해놓은 규칙(?) 같은 현상이라 이 현상을 마주치기 싫다면 내가 알아서 회피해야 할듯,,ㅋㅋ 근데 이 규칙 맘에 든다.. 이 현상이 없었다면 하나하나 마진을 계산했어야 한다는 생각에.. 어우 머리아퍼

형제 선택자의 종류

1. 일반 형제 선택자 (~) General sibling selector

a ~ b { property: value; } a와 b가 같은 계층에 있을 때, 지정한 요소의 형제인 모든 요소들을 선택한다.

Ex.

<div>
    <h1>멋사</h1>
    <p>과제</p>
    <p>재밌엉<p>
    <p>히힛<p>
</div>

h1 ~ p {
    color: white;
}

일 때, <h1> 태그 뒤에 있는 모든 <p> 태그의 색을 흰 색으로 변경시킨다.

• 지정된 요소가 앞에 존재하면 그 요소들의 형제들을 모두 선택한다.
• a 뒤에 오는 b에 적용한다. (바로 뒤에 올 필요는 없다.)

2. 인접 형제 선택자 (+) Adjacent sibling selector

a + b { property: value; } a와 b가 같은 계층에 있을 떄, 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택한다. 따라서, 다음에 위치한 형제 요소에만 값이 주어진다. 첫째 말고 둘째만 선택한다는 것

Ex.

<div>
    <h1>멋사</h1>
    <p>과제</p>
    <p>재밌엉<p>
    <p>히힛<p>
</div>

h1 + p {
    color: white;
}

일 때, <h1> 태그 바로 뒤에 있는 <p> 태그의 색을 흰 색으로 변경 시킨다. (<p>과제</p> 만 컬러가 흰 색으로 바뀐다.)

3. 일반 형제 선택자와 인접 형제 선택자의 차이

• 일반 형제 선택자: 지정한 요소 뒤의 형제 요소를 선택한다.
• 인접 형제 선택자: 지정한 요소 바로 뒤의 형제 요소만 선택한다.

* 얘네는 이해가 가면서도 막상 예시를 혼자 적다보면 이해가 안간다. 결합자 모양도 넘흐 헷갈림.. ㅠㅠ 혼동 없게 뜻을 정확히 알아둬야겠다.

:hover

a:hover { property: value; } 사용자가 포인팅 장치를 이용해 상호작용 중인 요소를 선택한다. 보통 사용자의 커서가 요소 위에 올라가 있으면 선택한다.

가상 클래스(의사 클래스)란?

선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다. :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있다.

• 예시

  a:hover {
    color: orange;
  }

  라면, 마우스를 a 위에 올렸을 때 a의 색이 orange로 바뀐다.

* hover를 이용해서 과제할 때 더 풍부한 효과를 줄 수 있었다! 마우스를 올렸을 때와 안올렸을 때 너무 갑작스럽게 효과가 전환되는 것 같다면,

transition에 값을 줘서 전환 시간을 바꿀 수 있다. 덕분에 글자가 뿅!!!!!하고 갑자기 커지는게 아니라 스르륵~ 커져서 더 만족스러운 결과를 얻었다 ^-^v

Background property

1. background-repeat

배경 이미지의 반복 방법을 지정한다. initial value: repeat, inherited: no

아래 값을 부여했을 때에

• background-repeat: repeat;: 배경 이미지가 계속 반복된다.
• background-repeat: repeat-x: 배경 이미지가 x축을 따라 반복된다. (가로로)
• background-repeat: repeat-y: 배경 이미지가 y축을 따라 반복된다. (세로)
• background-repeat: no-repeat: 배경 이미지가 반복되지 않는다.

2. background-position

배경 이미지의 위치를 지정한다. 문법: background-position: x-position y-position initial value: 0% 0%, inherited: no

• 위치 값으로 사용할 수 있는 것

  • 가로 위치 값: left, center, right, 백분율, 길이
  • 세로 위치 값: top, center, bottom, 백분율, 길이

• Ex. background-position: right center: 배경을 오른쪽 중앙에 배치한다.

* 과제할 때 이 두 가지의 백그라운드 속성을 모두 사용해보았다. 근데 no-repeat으로 설정하니까 반복되지 않는 부분은 흰색 바탕으로 나와서,,.. 이걸 어떻게 해결해야하지 찾아봤지만 결국 해결하진 못하였다 ㅠ 그래서 월요일에 여쭤볼 예정...! 그냥 다시 기본값으로 둘지 no-repeat으로 할지 1분 정도 고민하다가 no-repeat으로 뒀다 ^^ 반복되는 것 보단 흰색 바탕이 나은 것 같아서..ㅋㅋ

자투리 지식

1. 마진 상쇄 현상

여러 block-level 요소에 서로 다른 마진 값을 넣었을 때, 가장 큰 마진 값이 적용된다.

• block-level 요소에 padding이나 border 속성을 부여한다면, 마진 상쇄 조건에 부합하지 않으므로 마진 상쇄 현상이 일어나지 않는다. (경계면 분리)

2. 목록의 컨텐츠 구성

• ul(unordered list): 순서가 그닥 중요하지 않은 목록을 나타낼 때 사용한다.
• ol(ordered list): 순서가 중요한 목록을 나타낼 때 사용한다.

3. 한 요소에 class 이름을 두 번 이상 선언할 수 있다.

• Ex. <div class="section cat"> contents </div> 라면, 이 div는 section과 cat 두 가지의 class 이름을 가진다.

4. class 셀렉터

• .wrapper.wow {property: value;}와 .wrapper .wow {property: value}의 차이
  • .wrapper.wow {property: value;}: class 이름 중 .wrapper와 .wow을 포함한 요소를 선택한다.
  • .wrapper .wow {property: value}: .wrapper의 하위 클래스인 .wow를 선택한다.
• a :hover {property: value;}와 a:hover {property: value;}의 차이
  • a :hover {property: value;}: a의 하위 요소에 hover 효과를 준다.
  • a:hover {property: value;}: a에 hover 효과를 준다.

느낀 점

오늘은 마진 병합 현상으로 거의 한시간 반..? 정도 강의를 들은 것 같다 처음엔 이해가 잘 갔는데, 점점 딥해질 수록 이해도도 같이 떨어졌다..ㅋㅋㅠㅠㅠ 그래도 어떤 조건에 있을 때 이 현상을 볼 수 있는가? 에 대해서는 이해해서 다행이라는 생각. 오늘 수업에서 특히나 어려웠던건, 갑자기 display 속성에 cover를 주는 것이었는데 다행히 이런 방법이 있다~ 정도로만 알고 넘어가면 된다고 하셨...ㄷ....던가...........? 뭔가 다음에 제대로 배울 것 같아서 이게 어떤 값인지 살짝 알아보기만 했다..ㅎㅎ 그 외에는 9시 스터디에서 질문을 열심히 하며(?) 나름 이해를 했다 (오늘 배운 부분에 한해서) 근데 왜.. 과제 코드 짜는건 두시간이 걸리는건지............... 확실히 강사님이 코드를 짜실 땐 몰랐는데, 실제로 내가 코드를 짜보니까 내가 모르는 것이 무엇인지 훨씬 잘 느껴진다. 오늘 예제를 보니 더 잘하고 싶어졌다. ㅎㅎ 이번주 토요일은 없는걸로... 😂😂😂

• 좋은 개발자가 되기 위해선 최대한 많은 방법론을 알고 있는 것이 도움된다

• 코드 결과에서 내가 모르는 무언가가 발견되는 것: 공부의 시작이다! 사소할지라도, 동작에 대해 의문점을 가지자
• 내가 모르는 결과물이 나오면 그것을 관찰해야 한다 문제 인식이 중요하다는 것

경로 구별을 확실하게 해야 한다.

경로에 대해서는 어제 멘토님께서 주신 키워드 목록에 있어 미리 예습을 했던 부분이었다! 상대경로와 절대경로에 대해서 알아봤었는데, 오늘 수업에서는 HTML과 CSS 속에서의 경로 표현에 대해 배웠다. . . 수업 중간에 어떤 분께서 질문을 하셨다.

Q. 폴더에 들어가서 html 파일을 열면 div 배경이 보이지 않고, VS CODE 속 Open live를 통해 들어가면 div 배경이 보여요.

Ex. 문제의 코드 (재현한게 이게 맞는지 모르겠지만.. 내 예상)

<!DOCTYPE html>
<html>
    <head>
        <title>멋쟁이 사자처럼</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
                <img src="/images/profile.png">
                <h1>JANE DOE</h1>
        </div>
    </body>
</html>

이 질문을 보고 예습을 조금 해서 그런지, 경로 문제라는 것을 알게 되었다. 그러나 어떤 이유로 다르게 나타날까? 에 대해서는 명확하게 알지 못하였다. 그래서 왜 그런가에 대해 강사님과 멘토님께서 설명을 해주셨고, 그것을 바탕으로 좀 더 살을 붙여 아래에서 설명을 해볼 것이다..! (내가 뭐라고....)

먼저, '경로'란?

프로그래밍 언어, 운영체제 등에서 컴퓨터의 파일을 찾아가는 방법. 절대경로와 상대경로로 구분하여 사용할 수 있다.

** 아래 경로는 다 다른 경로를 나타낸다. 무엇이 다를까? **

• ./
• ../
• /

1. ./ 는 현재 디렉토리의 위치에 접근하는 방법이다.
2. ../는 현재 디렉토리의 상위 디렉토리의 위치에 접근하는 방법이다.
3. /는 최상위 디렉토리(루트 디렉토리) 접근 방법이다.

저게 뭔진 구분은 가는데.. 좀 자세히 알려줄래? 하는 분을 위해.. (예를 들어 먼 미래의 나)

1. 절대경로 Absolute path

파일의 최상위 폴더(root)부터 해당 파일까지의 전체 경로 즉, ** 파일이나 폴더를 최상위 폴더로부터 전체 경로를 통해 지정**하는 방식이다.

더 쉽게 풀어보자면, 해당 파일이나 이미지 등의 위치를 포함한 전체 주소를 말한다.

• 특징
  • 다른 페이지로 이동해도, 링크된 자원을 찾을 수 있다. : 항상 같은 위치를 가리키기 때문이다.
  • 파일이나 폴더의 위치에 상관없이 항상 정확한 경로를 지정할 수 있다.
  • 예시: https://www.google.com/, C:/Users/username/desktop/Test/test/index.html
• 장점
  • 폴더 구성을 눈으로 쉽게 볼 수 있다.
  • 어느 곳에서든 경로에 접근할 수 있다.
• 단점
  • 경로가 길고 복잡해질 수 있다.
  • 파일이 다른 위치로 이동할 때마다 경로를 수정해주어야 한다.

2. 상대경로 Relative path

현재 웹 페이지나 폴더의 위치를 기준으로 해당 파일까지의 위치를 작성한 경로 현재 위치를 기준으로 상대적인 위치를 표현하는 방식이다.

• 특징
  • 웹 페이지나 폴더의 파일이 이동해도 자원의 상대적 위치가 변경되지 않는다면 정상적으로 작동한다.
  • 항상 비교할 대상이 있어야 한다 : 기준 경로를 기준으로 상대경로가 구성되기 때문이다.
    • 예시: ./image/cat.png: 현재 폴더와 같은 위치에 있는 파일 ../image/cat.png: 현재 폴더의 상위 폴더에 위치한 image 폴더 속의 파일
• 장점
  • 폴더 구성이 상대적으로 지정되어 있기 때문에 서버나 폴더를 옮길 때 재설정이 필요없다.
  • 경로가 자주 바뀌거나 최초 디렉토리가 서로 다른 OS에서 작동해야 하는 프로그램을 만드는 경우, 경로를 일일히 수정하지 않아도 된다.
• 단점
  • 폴더의 구성을 눈으로 볼 수 없다.

3. 그렇다면 질문에 대한 답은?

이것은 절대경로 방식을 사용했을 때 생길 수 있는 문제이다. 위의 예시코드를 바탕으로 설명해보겠다.

*vs code속 live server에서는 현재 작업 중인 폴더를 기준으로 최상위 폴더를 설정한다. * 예를 들어, 현재 작업 중인 파일의 전체 경로가 C:/Users/username/desktop/Day2/style.css 이고, 현재 작업 중인 파일은 style.css 라고 하자. 또한, 내가 지금 필요한 이미지의 전체 경로는 C:/Users/username/desktop/Day2/images/profile.png 라고 가정한다.

<img src="/images/profile.png"> 를 입력하고, css파일을 live server로 확인해 보면 당연히 이미지가 나올 것이다. live server에서 최상위 폴더는 현재 작업 중인 폴더인 Day2로 설정되었기 때문이다. Day2 폴더에는 images라는 하위 폴더가 있고, 이를 live server가 알아들었기 때문에 당연히 live server에서는 이미지가 나올 것이다.

그런데, 작업 파일을 바로 여는 방식은 내 컴퓨터 전체 기준에서 최상위 폴더를 설정한다. 위의 가정과 똑같다고 생각했을 때, 당연히 <img src="/images/profile.png">를 입력하면 이미지가 나오지 않을 것이다. 작업 파일을 바로 여는 방식은 전체 기준에서 최상위니까.. <img src="/images/profile.png">를 html은 이미지 파일을 못찾았을 것이다. 그래서 이미지가 나오지 않았던 것이다.
따라서 둘 다 이미지가 나오게 하기 위해서는 절대경로를 사용하기보단 상대경로를 지정해주는 것이 더 쉬울 수 있다. 간단히 <img src="./images/profile.png"> 점 하나만 붙여주는 방법으로..ㅋㅋ

예시에서는 상대경로를 사용하는 것이 더 나은 방법으로 나왔지만, 사실 그때 그때 적재적소에 맞게 사용해주는 것이 더더 좋은 방법이다! 나를 괴롭게 만들었던 상대경로와 절대경로...

index.html

default html file.. 가장 유명한 처음 시작점 파일로, 웹사이트의 기본적 필수 값을 포함한다. 파일명은 관례적으로 index.html 을 사용한다.

왜 꼭 index로 해야하는가? 웹 서버에서는 원하는 모든 파일을 해당 사이트의 기본 값으로 인식하도록 구성한다. 그런데, 추가 구성 필요 없이 대부분의 웹 브라우저에서 즉시 인식되도록 한 것이 index.html 파일이기 때문에 index.html로 사용하는 것을 권장하는 것이다.

Html과 CSS 코드 짜기의 시작

1. 가장 큰 덩어리 구조

내가 만들고자하는 디자인에서, 가장 큰 덩어리 구조를 먼저 파악한 후 최소한의 컨텐츠로 시작한다. 언제나 전체적인 관점에서 레이아웃을 잡는 것이 좋다!

가장 큰 덩어리를 div로 잡고, 더 이상의 html 마크업은 그만둔 후 css로 돌아간다

2. 영역 차지와 CSS Reset

div가 얼마만큼의 영역을 차지하는지 가시화하기 위하여 background-color를 넣어준다. 그리고 브라우저에서 보면 내가 지정하지도 않은 margin이나 padding 값이 있다..? 이런 UA stylesheet를 삭제하기 위해 CSS Reset을 시작한다. (CSS Reset을 하는 이유: 서로 다른 브라우저 간의 기본 세팅값을 없애기 위하여) Ex.

/* ua reset */
body {
    margin: initial; /* (혹은 unset;) */
}

Q. 왜 여기서 margin의 초기값인 0을 주지 않고 initial을 쓰나요? -> margin에 초기값을 주겠다는 나의 의도를 명확히 하기 위해서 입니다.

initial을 하고보니.. caniuse가 말하길 IE 브라우저에서는 이 값을 사용할 수가 없단다.. 그래서 대신 쓰는 것이 바로 unset 값이다.

* Unset

각 브라우저에 지정된 세팅값을 없애겠다!

initial도 세팅값을 없애겠다는 의도를 줄 수 있지만, unset은 이름만 봐도 그렇듯이 더! CSS reset의 의도를 풍부하게 한다.

• 상속 지원 속성: unset; -> inherit; 으로 받아들인다.
• 상속 불가 속성: unset; -> initial; 으로 받아들인다.
• 상속 가능 여부를 모른다면, unset을 사용해보자 (그래도 MDN에서 한번 찾아보는걸 권장합니다)
  ### 3. 관례적으로, 웹사이트를 3등분해서 보자. `div`로 큰 덩어리를 구분하고.. 영역을 가시화해서 얼마나 차지하는지 보고.. CSS reset까지 했다면! 이제 다시 큰 덩어리를 작은 덩어리로 분리해야 한다. 관례적으로, 엄청나게 세분화해서 보는 것보다는 3등분해서 보는 것이 좋다.
• header: 웹사이트의 이름, 카테고리 등이 들어가는 부분
• contents: 세부적인 내용, 3등분한 것 중 가장 많이 변화하는 부분이다.
• footer: 카피라이트 등이 들어가는 부분

이렇게 레이아웃을 나누어주고, 가시화하고, 디자인 등을 수정하면서 html에 마크업해나가면 효율적으로 웹사이트를 만들 수 있다 ^___^!!

Class 속성

영역을 나눴는데 div가 너무 많아지니 구분하기도 어렵고, 무엇보다 div 셀렉터에 효과를 주면 모든 div에 효과가 적용이 된다. class는 이것을 해결하기 위해 쓰는 속성(attriute)이다.

class 속성은 원하는 이름을 넣고 css에서 class 이름을 선택자로 사용한다. 다른 모든 태그에도 class로 정의하여 사용할 수 있다. 이때, class이름은 알기 쉽고 의미에 맞게 짓는 것이 적합하다. (얼마나 이름 짓기에 고민했으면 BEM이라는 명칭도 생겼을까.. 도움되는 사이트도 함께 첨부한다. https://tech.elysia.land/%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%BB%A8%EB%B2%A4%EC%85%98-bem-b291ba7bff01)

Ex 1. html에서 class 속성은 아래처럼 사용한다.

<body>
        <div class="wrapper">
            <div class="header">header</div>
            <div class="contents">contents</div>
            <div class="footer">footer</div>
        </div>
    </body>
</html>

Ex 2. css에서 class를 셀렉터로 지정할 때엔 아래처럼 한다.

div.header {
    background-color: black;
}

이것은 div이면서 header이름을 가지고 있는 class만 셀렉터로 지정한다는 뜻이다.

.header 앞에 꼭 div를 써야 하는가? 난 이때까지 class 속성을 css에서 사용할 땐 당연히 .만 사용해도 되는줄 알았다. 그런데 . 앞에는 *(universal selector)가 생략되어 있었다! 그래서 .header라고 하면 타입과 상관없이 이름이 header인 모든 태그를 지정하는 것이다. (너무 광범위하다... 타입 셀렉터 지정이 이렇게 중요하다는 것을 배웠다.) 만약 같은 이름을 가진 다른 타입의 태그가 없다면, 보통 앞의 div를 생략해서 .header로 쓰긴 하지만.. 나는 만약을 위해 모두 붙일 것 같다.

하위(자손)선택자 Descendant Selector

셀렉터와 셀렉터 사이 descendant combinator(공백)를 삽입하여 만들어진 셀렉터 A 요소의 하위 B 요소를 선택하는 것이다. 두 요소는 공백으로 구분한다.

Ex. 시각적으로 보자면, 아래는 css 코드이고

.A B {
    background-color: beige;
}

아래는 html 코드이다.

<div class="A">
        <B>contents</B>
</div>

일 때, .A B의 의미는 A 요소의 하위인 B요소를 선택하겠다는 것이다.

header와 h1 사이의 공백을 descendant combinator 라고 부른다. 헷갈릴 수 있는 것으로는 자식 선택자가 있다.

• 자식 선택자: .header > h1로 표현하며, > 는 child combinator
• 자식 선택자와 하위 선택자의 차이점 : 하위 선택자는 자식 선택자에 비해 더 넓은 범위를 포함한다. 자식 선택자= 직계 부모-자식 관계에서만 가능 하위 선택자= 조상-자손 관계에서도 가능(부모-자식 관계도 당연히 포함)
• 사용 목적: 내가 원하는 셀렉터를 더 명확히 설정하기 위해

자투리 지식

** 1. div가 많아질수록 덩어리의 구분이 어렵다면?** header나 footer는 html 문서 내에서 여러 번 사용 가능한 태그이다. (-> 그렇기때문에 class로 정의하지 않으면 광범위해진다.) 식별을 용이하게 하기 위해 되도록이면 div 대신 의미가 있는 태그를 쓰는 것이 좋다. 그러나, main은 문서 내에서 한 번만 쓸 수 있기 때문에 div를 사용하는 것이 좋다.

2. 상위 div가 하위 다른 div 태그들을 감싸는 관례적 class 이름 하위 div를 감싸는 class 이름은 wrapper로 사용하는 것을 권장함

3. 이미지 짤림 현상

1. padding 값으로 높낮이를 조절하면 이미지 값과 다르게 나온다

-> 이미지가 잘릴 수 있음 2. 따라서, height 값을 무조건 auto로 두기보단 고정값으로 설정하는 것이 때론 좋을 수 있다. ex. 고정된 이미지의 크기를 결정해야 할 때

느낀 점

내가 두번째 타자로 블로그 리뷰를 받게 되었다... 와!!👏👏 특강이 끝나고 3교시가 시작할 때까지 심장이.. 두근거렸음 ~협심증이 생긴줄 알았어요..~ 그리고 계속 보면서 틀린거 없나 자꾸 수정하게 됐다..ㅋㅋㅋ 그런 과정에서 공부가 또 되는거라고 합리화중🤓 처음엔 벨로그 공개한 것이 좀 부끄러웠지만, 리뷰를 받으면서 내가 미처 모르고 넘어갔던 것들과 오타들을 세세하게 집어내주셔서 공개하길 잘했다고 생각했다. 만약 나중에 공개했다면 오늘처럼 세세하게 피드백을 받지 못했을 것 같고, 글쓰는 방식이 굳어진 시점에서 그 방식을 다시 고치기란 너무 어려울 것 같기 때문이다. 얼른 다른 동료분들 블로그도 보고싶다... 두근두근 . . . 확실히 하루하루 갈수록 이해하는 데에 시간을 오래 잡아먹는 내용들이 많이 생긴다. 하지만, 시간을 들여 이해하고 나면 너무너무 행복하고 희열이 넘쳐흘러서 계속 개발 공부가 하고 싶어진다! 학교 다닐 때도 이렇게 열심히는 안했는데.. 확실히 공부를 할 땐 내가 흥미있어하는 것을 해야 행복한 것 같다.. 아직 4일차고, HTML과 CSS 기초를 하고 있어서 나중엔 더 어려운게 더더~ 많이 나오겠지만 뭐.. 미래의 내가 하겠지 . . .

그리고 글쓰는 레이아웃을 바꿔보았다! 느낀 점을 맨 밑에 쓰는 것으로...ㅎㅎ 정보를 알기 위해 스크롤을 많이 내리기가 조금 힘들어서(는 구글링을 통해 얻은 경험담) 한 번 바꿔보았다....

그럼 오늘도 정리

끝.

1. margin의 auto 값은 어떻게 적용되는가?

A. auto값은 브라우저가 남은 너비의 공간을 자동으로 계산해서 좌우 균등하게 배분한다. margin left: auto; 또는 margin right: auto;로 설정했다면, element는 지정된 width만큼의 공간을 차지하고, 남은 공간은 균등하게 나누어져 좌, 우 margin이 갖게 되는 것이다.

2. margin과 padding의 차이

A.

• margin

  • 콘텐츠와 화면과의 여백 (바깥 여백)
  • 주변 요소와 거리를 두기 위한 영역임
  • 음수 값과 auto 값이 가능하다

• padding

  • 콘텐츠 내의 내부 여백 (안쪽 여백) 으로, 콘텐츠와 border사이의 여백임

3. css에서 상속이란?

A. 부모 요소에게 지정된 속성 중 몇 가지가 자식 요소로 값이 전달되는 것이다. 이것은 1-3 수업 정리에 예제와 함께 정리해두었다!

4. css property의 기본값

A. margin: 0 padding: 0 background-color: transparent background-image: none font-size: 16px display: inline width: auto

등등...이 있다.

5. Doctype을 사용해야 하는 이유는?

A.

doctype은 최신의 html 버전(living standard)에 맞게 코드를 작성하겠다고 선언하는 것이다.

• doctype 사용하지 않으면 : 서로 다른 브라우저 환경에 따라 다른 결과물을 출력하는 경우 발생한다
• 역할
  • 브라우저가 html 문서를 동일하게 인식할 수 있게 한다.
  • 문서간 호환성을 높이기 위한다

6. index.html 파일이 가지는 의미

A.

index.html 파일이 뭔데?

• 웹 사이트의 기본 페이지에 표시되는 파일, 웹 사이트의 기본적인 필수 값을 포함
• 가장 일반적으로 사용되는 파일 이름임

웹 서버에서는 원하는 모든 파일을 해당 사이트의 기본값으로 인식하도록 구성하는데, 추가 구성 필요 없이 대부분의 서버에서 즉시 인식되는 파일=index.html 이기 때문에 index.html로 사용하는 것을 권장한다.

7. html 요소들의 부모/형제 관계

A.

부모 요소: 해당 요소를 포함하는 가장 가까운 상위 요소 형제 요소: 같은 부모를 가지고 있는 요소

• 부모 요소의 특징

  • 그 요소의 부모 요소는 단 하나
  • 자식 요소는 이와 반대로, 자식 요소는 여러 개 일 수 있다.

• 형제 요소의 특징

  • 인접한 관계: 형제 관계에 있는 요소 중 바로 뒤이어 나오는 요소를 인접한 관계에 있다고 한다.

• 조상과 자손 관계

  • 부모와 자식의 관계를 포함해서, 더 확장된 관계
  • 조상 요소: 그 요소를 포함하는 모든 요소, 부모 요소를 포함하여 여러 개 일 수 있음
  • 자손 요소: 그 요소가 포함하고 있는 모든 요소

Ex.

<html>
    <head>
        <title>aaa</title>
    </head>
    <body>
        <h1>멋사</h1>
        <p>프론트엔드 스쿨</p>
    </body>
</html>

부모-자식 관계: <body>(부모), <h1>, <p>(자식) 형제 관계: <h1>, <p>

8. css에서 타입 셀렉터란?

A.

html 문서에서 지정된 태그를 지칭하는 선택자

Ex.

<html>
    <head>
        <title>aaa</title>
        <style>
            h1 {
                    color: red;
                    }
            p {
                    background-color: grey;
                }
        </style>

    </head>
    <body>
        <h1>멋사</h1>
        <p>프론트엔드 스쿨</p>
    </body>
</html>

타입 셀렉터: h1, p

9. div 요소와 h1 요소의 차이점은?

A.

• div
  • 아무 것도 나타내지 않는 콘텐츠의 영역을 설정
  • Ex. <div>나는 감자</div>를 작성했을 때, 웹 사이트에서 보면 '나는 감자' 라는 글자만 나타남
  • 이유: div는 영역을 나타내는 역할 외에는 특정한 의미가 없다
  • 다른 요소를 포함시키는 용도로도 사용(h1은 X)
• h1
  • 이 페이지에서 최상위 제목인 텍스트를 감싸는 역할
  • 보통 검색 엔진에서 h1 같은 경우는 대제목으로 받아 들임

    -> 알고리즘에서 중요하게 보는 부분

  • <h1>나는 감자</h1> 코드를 웹 사이트에서 실행시키면 div와는 다르게 텍스트가 크고 굵게 나타난다.
• 따라서, div는 영역을 구분할 때, h1은 제목을 표시할 때 사용
• div(block 속성)와 span(inline): 검색엔진에서 중요한 의미를 갖지 않음

• 보통 레이아웃을 잡을 때 div나 span을 사용

내가 착각했던 것: div가 문단을 나누는 용도로도 사용되는 줄 알았는데, 문단/문장/글의 내용을 갖는 것은 <p>였다. 또한 주제를 나타낼 땐 <article>도 사용한다.

끝.

오늘 수업은 어제보다 더 재미있게 들었다! 수업시간에 간간히 정리하며 이해했지만, 확실히 벨로그로 한 번 더 정리를 하게 되니 더 기억에 오래 남는 것 같다. 앞으로도 꾸준히 써야지

html 문서에서 css파일 연동하기

Ex

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="CSS 파일위치">
    </head>
    <body>
    </body>
</html>

• ./ 현재 경로 위치 ../ 이전 경로 위치
• 초보자라면 html을 완성해서 css로 꾸미기보단, html로 간단한 영역만 나누고(최소한의 html 구축), css로 레이아웃을 어느정도 내 눈에 보이게 직관적으로(Ex. h1이 어느 정도의 영역을 가지는지) 고친 후, 내가 원하는 디자인을 대강 적용해두고 다시 html을 수정하는 것이 더 편할 수 있다고 하셨다! html 문서의 내용은 계속 변할 수 있기 때문이다! (확실히 과제 내주셨을 때 그렇게 해봤는데 시간도 단축되고 속성 값이 어떻게 나타나는지도 시각적으로 더 쉽게 보여서 좋았다.)
• html과 css를 분리했을 때
  • 관리가 용이하다
  • 여러 페이지를 하나의 css 파일로 컨트롤 할 수 있다
  • html 마크업이 더 명확하게 보인다.

브라우저 기본 세팅값을 없애고 시작하자 (CSS Reset)

브라우저마다 각각의 기본 세팅값이 다르다.(User Agent Stylesheet) css reset을 하는 이유는 브라우저 간 세팅값이 각각 다르기 때문에 이 차이를 최대한 없애는 코드를 넣어서 브라우저 요소들의 스타일이 0인 상태에서 시작하기 위한 것이다.

Ex

 /* UA Reset */    
body {
        margin: 0; 
            }
/* Componets */
body {
        background-color: orange;
            }

예제에서는 margin을 사용했기 때문에 margin으로 설명한다

(0) 내가 쓰는 크롬 브라우저에서는 body의 margin 기본 세팅값은 8px로 지정되어 있기 때문에, 이것을 아예 margin의 초기값(initial value)으로 지정하고 시작한다. (1) margin의 초기값으로 세팅한 후, (2) 같은 type selector라도, reset한 selector와 Components가 있는 selector는 따로 표기한다. (3) 초기값으로 셋팅한 부분엔 위에 주석으로 UA Reset으로 구분해두면 나중에 보기 편하다!

Block-level element의 width나 margin 값이 auto일 때,

브라우저는 auto 값을 어떻게 계산할까?

직계 부모가 제공해주는 콘텐츠 영역(Containing block)의 너비, 즉, 부모의 너비만큼 가득 차게 자동으로 계산해서 적용한다. 그렇다면 width나 margin의 값을 지정해준 후 남는 공간은 어떤 공간인가? → 사용 가능한 여유 공간 (available space)

오늘 수업에서 앞뜰, 정원 등등 다양한 비유가 나왔다. 정확한 명칭은 사용가능한 공간! 앞으론 이렇게 알기

Ex 1. width 값 지정 후 사용 가능한 공간은?

div {
        width: auto;
        }

일 경우: div의 너비는 브라우저가 부모 요소가 제공해주는 컨텐츠 영역을 자동으로 계산한다. 따라서, 사용 가능한 공간은 전체 너비로 사용된다. (집(눈에 보이는 것)과 마당(눈에 보이지 않는 것)으로 비유하자면, 집이 마당 영역을 다 차지하고 있는 것이다.)

* width: 100%;와 width: auto; 다른 점

• width: 100%;: 100%로 픽스한다. 마진/패딩을 넣게 된다면 전체 크기가 커져서 옆으로 삐져나가는 현상 발생.
• width: auto;: 브라우저가 자동으로 계산해서 마진/패딩을 넣게 되어도, 브라우저가 이것을 고려하여 컨테이너 블록의 크기에 맞게 지정한다.

Ex 2.

div {
        margin: auto;
        }

일 경우: 사용 가능한 공간은 div의 여백으로 사용된다. (집과 마당으로 비유하자면, 여백이 되어 보이지 않을 뿐, 여전히 마당이 내 소유인 것처럼, 여백 공간도 div 소유)

상속 Inheritance

부모 요소에게 지정된 속성 중 몇 가지는 자식 요소로 값이 전달되는 것 상속의 우선 순위: 부모의 지정 값 < 자식의 지정 값

• 상속이 되는 property: text-align, line-height, color, font 등
• 상속 불가한 property: width, height, padding, margin, border, display, background 등
  

Ex 1.

부모 {
            color: black;
}
자식 {

}

위의 상황에서 color속성은 상속이 가능한 속성이다. -> 자식의 color 값= 부모에게 상속된 black

Ex 2.

부모 {
            color: black;
}
자식 {
            color: red;
}

위 상황에서 자식의 color 값은 red로 지정되었기 때문에 -> 부모 요소에서 color값 상속되지 않음

Ex 3. 만약 부모요소가 div이고 img가 자식요소일 때

div {
        display: block;
        }
img {
        display: 뭘까요?
        }

위 상황에서 div 내부에 display: block이 설정되어 있더라도 display 속성은 상속이 되지 않기 때문에 img에 상속이 되지 않는다. 따라서 img의 display 값은 inline(기본값)이다.

(그러나, img에 display: inherit; 을 추가하면 강제로 상속이 되게 할 수 있다.)

block-level element와 inline element의 차이점

• Block (Container)

  * 모든 inline 요소를 포함할 수 있고, 다른 block 요소 또한 일부 포함 가능 * 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태 * 한 줄 전체 공간을 차지 (한 줄에 하나씩)

• block-level element 뒤에는 줄바꿈 O

  • box-model 정상 적용
  • width와 height를 통해 사이즈 조절 가능
    • 지정이 되지 않을 때: width: 화면에서 한 줄을 다 차지함 (100&와 전부를 구별하자) height: 컨텐츠만큼 차지
    • <div>, <ul>, <h1~6>, <p>, <article>, <section> 등
      

• inline (Contents)

  * 항상 block 요소 안에 포함되어 있으며, inline 요소 안 다른 inline 요소가 포함될 수 있다. * 컨텐츠만큼의 크기를 가진다. (컨텐츠가 끝나는 지점까지 넓이로 가짐=줄바꿈X)

• 각 줄 안에서 inline element는 쓰기 모드에 따라 수직or수평 모드로 정렬

  • box-model 부분 적용
  • width와 height의 개념 자체가 없다. 왜? 컨텐츠만큼 너비가 잡히니까!
  • 상하 margin 적용X, 공간도 차지하지 않음
  • 상하 padding 적용X, 시각적으론 보이지만 공간을 차지하진 않는다. 그래서 예제 떄 겹쳐보였던 것
  • 따라서 box-model이 부분 적용된다.
  • 부모에게 line-height나 text-align을 줌으로써 텍스트의 중앙, 좌&우측 정렬 가능
  • 예외: img 요소
    • inline element지만 width 값, height 값이 이미 적용되어 있다.
    • 상하 margin, padding 또한 적용 가능
    • <a>, <img>, <span>,<script>, <em>, <map> 등
      

  • inline-block

    * inline의 특성과 block의 특성을 합친 것 * 컨텐츠 만큼의 크기를 가진다 * 줄바꿈 X

    • 내부: block 취급, 외부: inline 취급 : 자기 자신을 봤을 땐 block이지만, 배치된 바깥 레벨에서는 inline으로 취급함
    • inline의 특성을 가지기 때문에
      • 컨텐츠 양만큼 전체 너비가 자동 조절된다
      • 부모에게 지정된 text-align 속성에 영향 받는다
      • 정렬에 용이하나 한계를 안고 있다
    • block의 특성을 가지기 때문에
      • 원하는 width값과 height값을 지정 가능
      • margin과 padding의 상하 간격 지정 가능
    • inline or block or inline-block element 라도 display 속성에 원하는 값을 넣으면 바꿀 수 있다! Ex. inline을 block으로 바꿀 때 : 원하는 셀렉터에 display: block; 을 추가한다

자투리 지식

Q. h1에 text-align: center를 넣었는데, h1의 위치는 그대로고 안의 내용(콘텐츠)만 중앙 정렬이 되었어요!

A.

• h1은 block-level element 이다. 또한, text-align은 h1 자체를 가운데로 옮기는 것이 아닌 h1의 콘텐츠만 가운데로 정렬한다.
• 따라서, h1 뿐만 아니라 p, ... 등등의 block 속성을 가진 셀렉터에도 text-align 속성을 사용하고 싶다면, 그 요소의 부모 요소에 적용해야 한다.
• !!! block 속성을 가진 태그에는 콘텐츠만 가운데로 정렬이 된다!!!

2. margin의 단축속성

• margin: 0 auto 40px;: 상 | 좌우 | 하
• margin: 5% auto;: 상하 | 좌우

• margin: 2px 1em 0 auto;: 상 | 우 | 하 | 좌
• margin: 100px;: 네 면 모두 적용 시계방향으로 돌아간다고 생각하면 된다

끝.

멋쟁이 사자처럼 프론트엔드 스쿨에 참여하게 되면서 벨로그를 시작했다. 노션으로 1차 정리하고, 강사님께서 블로그를 왕추천해주셔서 많은 블로그 플랫폼 중 벨로그를 개설하여 2차 정리를 하게 되었다. 두 번 정리하는만큼 머릿속에 좀 들어오면 좋겠다 아무튼 html과 css 둘다 발만 담군... 아니 물방울만 떨어뜨린 내 입장에선 오늘 강의를 통해 의미를 잘 몰랐던 용어와 역할들에 대해 알게 되었다. 과연 내가 9-6에 적응할 수 있을지 걱정했었는데 (집중력 부족)🤷‍♀️ 생각보다 점심먹고 졸린거 말곤 집중 잘했었던 것 같다 오늘 과제도 나름 할만했다....! 나중에 js 시작하면 할만할진 모르겠지만 😂 일단 끝까지 해보자!!!!

* html과 css 기초 1강에 대한 내용을 담고 있습니다 ** 오늘 배운 것과 혼자 찾아보며 짬뽕된 지식을 정리합니다! 잘못된 내용은 알려주시면 감사하겠습니다 🙏

Doctype에 대한 이해

<!doctype html>

Document Type Declaration, 문서 형식 선언 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문 최신의 기준(html5)으로 코드를 작성하겠다는 뜻

반드시 작성해야하며, 지정하지 않고 코드를 작성할 경우 → 정석적 방법이 아님에도 올바르게 코드를 작성했다고 착각할 수 있음 (나중에 엄청 열심히 짜놓고 엎으면 눈물날듯)

HTML Tag

<!DOCTYPE html>
<html>   (<-Start tag)
    <head></head>
    <body>
        <ul>
            <li>orange</li>
        </ul>
    </body>
</html>  (<-Endtag)

<html>태그는 부모요소, <head>,<body>는 자식요소, <head>와 <body>는 형제관계(siblings), <body>와 <li>는 상위/하위 관계이자, <body>는 <li>의 조상 관계이다. https://juheeexx.tistory.com/5 님의 블로그를 참고하면 더 쉽게 이해가 가능하다! 이건 틈날 때 벨로그에 다시 정리할 것.

<!DOCTYPE html>
<html>
    <head>
        <title>Fruits</title>  <-홈페이지의 이름(탭에 나타남)
    </head>
    <body>
        Orange <- 홈페이지의 내용
    </body>
</html>

• Fruit, Orange 등 요소 안의 내용: 컨텐츠 img는 자체가 컨텐츠(Empty tag)
• <head>에는 홈페이지 이름, 썸네일, 검색을 위한 문서 설명, 파비콘 등 문서가 가지고 있는 부차적인 정보가 담긴다. (데이터를 꾸미는 데이터)

CSS의 동작 방식

Html 문서 내에서는 아래로 표시(<style>...</style>)

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                background-color: orange;
                        }
        </style>
    </head>
    <body>
        <h1>ORANGE</h1>
    <body>

style 태그 내에서 h1: 타입 셀렉터(Type selector), background-color: Property(속성), orange: value값 Q. 지훈님: h1은 body에 종속된 개념으로 이해했는데 타입셀렉터에서 body에 지정해주는 값들은 h1에 어떤 영향도 주지 않는다고 봐야 하는 건가요? A. 직접적인 영향은 X, Property에 따라 다름 조상 중 지정된 color: blue;는 상속된 것을 보면 이해가 된다. (h1에 만약 color: orange;가 적용되어 있다면 상속되지 않는다!)
나도 확실히 알게 되어서 좋은 질문이었다고 생각함! 역시 나쁜 질문은 없다..

• 순위

  body {
        background-color: orange;
        background-image: url(images/orange-bg.png);
            }

  에서, background-image의 property가 backgroun-color보다 더 우선된다.
• • 그러나 같은 property일 땐 하위 property가 더 우선됨

초기값 Initial value와 브라우저 기본 스타일

• 초기값(Initial value): 각 property에 직접 지정하지 않아도 이미 지정되어 있는 기본값

  h1 {
    background-color: transparent;
        }

  background-color를 지정하지 않아도 투명으로 나오는 이유: 초기값이 transparent로 설정되어 있기 때문 ** background-image의 초기값: none

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> heading 태그: html 문서에서 제목을 정의할 때 사용, 1~6단계로 나뉘며 <h1> 태그가 가장 단계가 높다.

• 크기가 다르게 나오는 이유: 브라우저의 기본 설정때문이다.
  • 사용자 에이전트 스타일시트
    • 브라우저가 사용자에게 기본으로 넣어준 설정
    • 브라우저에 종속적
• 마크업 언어를 사용하는 이유: 데이터에 추가적인 정보를 제공하기 위하여 사용함

• div 영역: body 직계 부모가 제공해주는 컨텐츠 영역의 너비만큼 가득 차 있음 __ 직계 부모가 제공해주는 컨텐츠 영역: Containing block__

  <!DOCTYPE html>
  <html>
    <head>
        <title>Fruits</title>
        <style>
            body {
                background-color: orange;
                background-image: url(images/orange-bg.png);
            }
            div {
                background-color: white;
                width: auto;
                                height: auto;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="./images/orange.png">
            <h1>ORANGE</h1>
            <ul>
                <li>Orange</li>
                <li>Kiwi</li>
                <li>Strawberry</li>
            </ul>
        </div>
    </body>

  ** width: auto; 값: 직계 부모가 제공해주는 컨텐츠 영역의 너비만큼 브라우저가 자동으로 계산(가득차게), 부모 너비 만큼 height: auto; 값: 내부에 있는 자식들의 높이 만큼 -> auto로 두는 것이 유지보수에 효과적이다 벨로그에 쓰기 위해 구글링을 하던 중, 좋은 벨로그를 발견했다! 같은 이종찬 강사님의 강의를 들으신 분이 적어놓으신 벨로그를 보며 더욱 이해가 잘 되었음 참고) https://velog.io/@kimconut/Day20.-CSS-스터디

• div 컨텐츠가 두 개일 때, width를 조절해도 옆으로 나란히 놓지 못하는 이유: 부모(body)에게 상속받은 영역을 그대로 사용하기 때문

CSS 박스모델

• margin: 바깥 여백

  margin-left: auto;
  margin-right: auto;
  margin: 0 auto;

  margin: 0 auto;: 단축속성(Shorthands) margin-left:auto와 margin-right:auto를 한줄로 표현 참고) https://hansolcha.tistory.com/4

• padding: 안쪽 여백

  width: 400px;
  padding: 60px;

  padding은 전체 width에 +@되는 특성을 가진다 =자신의 너비, 높이에 더해진다 예시에서, 전체 너비=400px+60px로 계산

• border: 테두리, 자신의 너비 및 높이에 더해진다

  border-width: 4px;     -> 테두리의 두께
  border-style: solid;   -> 테두리 모양
  border-color: orange;  -> 테두리 색
  

*** 단축속성을 활용하면 border: 4px solid orange;

```

• border-radius: 테두리의 각진 부분을 조절하는 property border-radius 사용) https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

용어정리

라고 쓰고 어디에 넣어야 할 지 모르는 것들...모음

• selector 셀렉터: 선택을 해주는 요소, 특정 요소를 선택하여 스타일을 적용할 수 있음
  • 부모, 부모의 형제, 부모 형제의 자식을 선택하는 선택자는 존재x
• inheritance 상속: 부모 요소에게 지정된 속성 중 몇 가지는 자식 요소로 값이 전달
• <ul>: unordered list
• img src에서 src : Attribute; 속성, 특성
• 경로에서 ./→ 현재 위치, 생략가능
• *: Universal Selector: 전체 선택자
  • html페이지 내부의 모든 태그를 선택
    • 모든 형태의 모든 요소를 선택함
    • 문서 전체에 한번에 적용해야하는 스타일이 있을 때 사용

끝