본문 바로가기

전체 글101

프론트엔드 예제 (1) Overwatch 캐릭터 선택 html과 css만 이용하여 간단한 overwatch 캐릭터 선택 예제를 만들었다. https://warm-kataifi-1e2fe8.netlify.app/ display: flex; flex-wrap: wrap; justify-content: center; => hero 각 아이템들의 자연스러운 줄 바꿈 처리와 수평 정렬. 캐릭터 박스 크기보다 이미지의 크기가 커서 넘치는 부분은 overflow: hidden; 적용 캐릭터에 마우스를 올렸을 때 배경 색상과 크기가 커지는데 다른 형제 요소보다 위에 위치할 수 있도록 :hover를 적용한 코드에 z-index: 1; 적용 가로 값이 존재하는 요소의 margin: auto; 로 작성하면 수평 가운데 정렬됨. transition: transform .1s ,.. 2022. 11. 24.
CSS 기본속성(7) 전환 효과와 변환 효과 전환 효과 - 요소의 전환을 자연스럽게 만들어주는 속성 transition : 요소의 전환 효과를 지정하는 단축 속성 - transition: 속성명 지속시간(필수 포함 속성) 타이밍 함수 대기시간; - transition-property 전환 효과를 사용할 속성 이름 지정 - 기본값 all - 속성 이름 명시 (width, background-color ...) - transition-duration 전환 효과의 지속시간 지정 - 기본값 0 - 시간 (1s , 2s ...) - transition-timing-function 전환 효과의 타이밍 함수 지정 - 기본값 ease (느리게-빠르게-느리게) - linear 일정하게 - ease-in (느리게-빠르게) - ease-out (빠르게-느리게) - e.. 2022. 11. 24.
CSS 기본 속성(6) 플렉스 정렬 플렉스 정렬 - 부모 요소에 display 값을 flex로 지정하여 정렬하는 방법 - flex : 블록요소 - inline-flex : 인라인 요소 - 블록 요소는 기본적으로 수직으로 쌓이지만 flex를 통해 수평 정렬이 가능하다. 1 2 3 .parent { width: 400px; height: 300px; background-color: royalblue; display: flex; } .child { width: 100px; height: 100px; border: 1px solid red; background-color: orange; } => flex 적용으로 블록 요소를 쉽게 수평 정렬하였다. => 이렇게 flex를 사용하면 부모 요소는 flex container라고 부르며 자식 요소는 fl.. 2022. 11. 24.
CSS 기본 속성(5) 요소의 배치와 쌓임 순서 position - 요소의 위치 지정 기준 - 기본값 static : 기준 없음 - relative : 요소 자신을 기준 - 요소를 옮겼을 때 배치 전 자리는 시각적으로만 비어 있음 - absolute를 위한 사용 - absolute : 위치 상 부모 요소를 기준 - 사용 시 형제 요소와의 상호 작용이 무너지고 요소가 위로 뜨면서 요소가 겹침. - 위치상 부모 요소를 relative로 지정 필요 - 부모/상위 요소에 position값이 없다면 뷰포트를 기준으로 함. -fixed : 뷰포트를 기준 (화면에 고정) - 스크롤을 해도 위치가 변하지 않음. => absolute와 fixed는 display 속성이 block으로 변경됨. 위치 지정 top, bottom, left, right -> 음.. 2022. 11. 24.
CSS 기본 속성(4) 배경 속성 background-color - 요소의 배경 색상 - 기본값 transparent (투명) - Hex , rgb, rgba background-image - 요소의 배경 이미지 삽입 - 기본값 none - url("경로") - 이미지 경로 삽입 .img { background-image: url("./image/logo.jpg") } background-repeat - 요소의 배경 이미지 반복 - 기본값 repeat - repeat-x (수평 반복) , repeat-y (수직 반복) , no-repeat => 기본값과 no-repeat 적용 background-position - 요소의 배경 이미지 위치 - 방향 : top, bottom, left, right, center - 단위: .. 2022. 11. 24.
CSS 기본속성(3) 글꼴과 문자 속성 font-style - 글자의 기울기 속성 - 기본값 normal - italic : 이텔릭체 (기울어진 글자) font-weight - 글자의 두께 속성 - 기본값 normal (400) - bold (700) - 100~900 : 100단위로 굵기 설정 가능 - 보통 normal(400)과 bold(700) 사용 font-size - 글자의 크기 속성 - 기본값 16px - 단위로 지정 : px em rem line-height - 한 줄의 높이 (행간과 유사) - 기본값 normal - 숫자 (요소의 글꼴 크기의 배수로 지정) - 단위 (px em rem으로 지정) - 한 줄의 높이에서 글자는 수직 가운데 정렬됨. span { line-height: 2; } /*기본 글꼴 크기인 16px의 2배로 .. 2022. 11. 24.

티스토리툴바