본문 바로가기

웹/웹(코딩)

웹 _ 020일차 [코드몽키 / 메뉴바 만들기 훈련]

밑에 두줄씩은 같은 의미이다

step 100

monkey.step 100

monkey.say(right)
say right

monkey.turn(right)
monkey.turn(-90)

 

a의 display는 inline
inline은 너비, 높이, 패딩, 마진 다 안먹음
a에 패딩을 줄거면 display를 block이든 inline-block이든 바꿔줘야함

 

<!-- nav.menu-1>ul>li*3[href="#"]{메뉴아이템$} -->

 

https://app.codemonkey.com/courses

 

CodeMonkey

CodeMonkey is a fun online game that teaches you how to code. Real world programming language. Write code. Catch bananas. Save the world.

app.codemonkey.com

 

 

여기서부턴 끄적인 메모

nav -> 센터 정렬 [text-align]
ul -> 배경색, 문자화, 패딩값, 레디우스 [BC, display, padding, radius] 
li -> 가로정렬, 넓이값 [display, width]
a -> display를 block으로 바꿔주고 패딩값을 부여
a:hover -> 컬러변경

nav -> [text-align]
ul -> [BC, display, padding, radius] 
li -> [display, width]
a -> display를 block으로 바꿔주고 패딩값을 부여
a:hover -> 컬러변경

-- 노멀라이즈 --
nav -> 센터 정렬
ul -> 배경색, 문자화, 패딩값, 레디우스 
li -> 가로정렬, 넓이값
a -> 패딩값을 부여
a:hover -> 컬러변경

inline-block과 flex의 차이??
ul에 inline-block을 주면 폭이 줄어들고
li에 inline-block을 주면 가로 정렬이 되는 이유