https://codepen.io/kimhyeji324/pen/qBQgEXo padding연습 ... codepen.io padding 을 연습해보자 padding 은 내가 이해하기로는 자신이 가지고 있는 부분이고 padding 의 크기가 커질수록 그 태그가 가지고 있는 부분이 커진다. 지금은 패딩섹션의 패딩이 0이다. 그래서 그 자식인 플렉스 아이템이 모든 부분을 다 차지 하고 있다. 여기서 점점 패딩 좌우 값을 늘려보면? 점점 자식 태그가 가지고 있는 부분이 줄어들고 있다. 이렇게 padding 의 값이 늘어나면서 그 태그의 영역은 점점 늘어나고 자식 태그의 부분은 줄어드는것이다. 그리고 지금 위에 상황은 box-sizing : border box 를 적용 시켜서 자신의 바깥쪽으로 는 크기가 커지지는..

(출처 :https://nuknukhan.tistory.com/38) o Html 에서 폰트어썸을 불러온 경우 아이콘 크기를 설정하는 클래스를 추가 사용한다. fa-lg =>33% 확대 fa-2x =>2배 fa-3x =>3배 fa-4x =>4배 fa-5x =>5배 fa-lg fa-2x fa-3x fa-4x fa-5x o css 에서 폰트어썸 을 불러온 경우 html 에서 그 불러온 태그에 class="fa-3x" 만 추가해주면 똑같이 적용된다. 예시 )

position white-space :nowrap; 줄바꿈없이 나오게 하기 overflow-x: auto, scroll , hidden auto는 스크롤바 자동생성, 글이 길어져서 한줄에 안보일떄 scroll 은 무조건 길이가 어떻든 스크롤바 생성 hidden 은 길이 길어지면 ... 으로 표시됨 table ::after ::after 은 모든 엘리멘탈에 기본적으로는 있지만 보이지는 않고 ul > li::after { content:"님"; } 이런식으로 쓰면 모든 li 태그 안에서 님이라는 글자가 뒤에 붙게 된다 똑같이 ::before 은 적용시킨 태그 안에 님이라는 글자가 앞에 붙게 된다.

border-radius 곡선 추가해주기 이렇게 하나만 쓰고 % 로도 쓸수 있다 div:hover 커서 올리면 css 설정한대로 바뀜 ul ,li 노멀라이징 ul은 기본적으로 margin top 이 생김 ul { margin :0; } li 는 목록 옆에 동그라미 아이콘이 생김 li { list-style :none; } 그래서 보통 body,ul, li { margin:0; padding:0; list_style:none; } 이렇게 많이 쓴다.

https://www.nintendo.co.kr/ 만들어 본것 아래

https://www.nintendo.co.kr/ Nintendo www.nintendo.co.kr

flex-direction [flex-direction] 기본값(row) : 한줄에 같이 배치 - justify-content: 가로정렬 - align-items: 세로정렬 - flex-grow: 가로작동(너비) column : 한줄에 하나씩 배치 - justify-content: 세로정렬 - align-items: 가로정렬 - flex-grow: 세로작동(높이)

flex 는 지금 까지 배운것들을보다 훨씬 간편하고 용이하게 만들어줄수 있는 친구이다. 결론부터 보자면 위에 사진은 flex 를 이용해서 만든 도형이다. div 는 원래 한줄에 쓰지 못한느 block 이다. 하지만 부모 엘리먼트에 display : flex 를 설정해주면 그 자식 엘리먼트들은 영향을 받게 된다. 그래서 저렇게 한줄로 있게되고 inline-block 을 썼을 때 처럼 다른 여백이 생기지 않아서 font-size 나 box-sizing 을 하나씩 적용해야하는 수고를 줄일수 있다. 그리고 자식들의 너비의 합이 부모보다 크게되더라도 줄바꿈되지않고 안에서 알아서 너비가 줄여진다. 아래는 flex의 속성들이다. flex-container 는 위에 그림에서 큰 빨간색 네모라고 생각하면되고 flex-i..

높이를 공유하는 flex-item 상위 요소는 높이가 auto 일때 (높이 값을 따로 지정안할때) 하위 요소의 높이 값을 갖는다. 그래서 지금 item 1 의 높이 값이 300px 이니까 300px를 받게 되고 동시에 display : flex; 의 특징 중 하나인 flex item 은 높이가 auto 일때 flex container 의 높이를 물려받게 되는걸로 인해 똑같이 item 2 도 높이 300을 갖게 된다. 높이를 공유하는 flex-item 높이 최소화 후 세로 정렬 디스플레이 flex 를 적용하고 그 적용한 효과를 받는 flex item 은 높이를 정해주지 않아도 자동으로 container 의 높이를 받는다. 그런데 여기서 align-item : center ( start , end 도 가능)..