본문 바로가기

728x90
반응형
SMALL

프론트엔드/HTML&CSS

(24)
baseline baeline에 대해 알아보자. baseline은 간단히 말하면, 글자의 밑면이라고 할 수 있다. 수직 정렬을 지정하는 verticla-align css 속성을 여기에 추가해보자. 이 속성은 대부분 이미지와 텍스트를 같은 요소에서 중간으로 배치하기 위해 많이 사용하고 있다. 텍스트 요소에는 line-height 를 주고 img 태그에 vertical-align: top 주고 쓰면 웬만한 경우에서는 원하는 결과를 낸다. vertical-align을 이용해서 baseline에 대해 조금 더 자세히 알아볼 수 있다. vertical-align : top 등등... 이렇게 코드를 작성해주면 작성한 코드에 맞게 정렬이 이루어진다.
마우스 오버 버튼 만들기 실습_css https://2myona.tistory.com/220 css_선택자 정리 CSS에서 스타일링 해줄 요소는 '선택자'로 결정한다. 우리가 이미 알고 있는 것들부터 시작해서, 또 어떤 선택자들이 있는지 살펴보자! 태그 이름 /* 모든 태그 */ h1 { color: orange; } 클래스/아이디 /* 2myona.tistory.com 마우스 오버에 대한 간단한 설명은 위를 참고 - html 코드 - CSS 코드 이것도 가능하다!' (input -> submit-bin 으로 바꾼 형태)
css_선택자 정리 CSS에서 스타일링 해줄 요소는 '선택자'로 결정한다. 우리가 이미 알고 있는 것들부터 시작해서, 또 어떤 선택자들이 있는지 살펴보자! 태그 이름 /* 모든 태그 */ h1 { color: orange; } 클래스/아이디 /* 'important'라는 클래스를 갖고 있는 모든 태그 */ .important { color: orange; } /* 'favorite'라는 아이디를 갖고 있는 태그 */ #favorite { color: blue; } 자식 (children) /* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 태그 */ .div1 i { color: orange; } 직속 자식 (direct children) /* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 태그 */ ...
border 꾸미기_radius, background, shadow Border 모서리 설정 border-radius라는 속성을 사용하면 요소의 모서리를 둥글게 만들 수 있습니다. 더 큰 값을 쓰면 더 둥글게 되는 거죠! %로 써줄 수도 있습니당 예를 들어 50%로 적어주면 동그랗게 border가 설정됩니다! .div1 { border: 1px solid green; border-radius: 5px; margin-bottom: 20px; } .div2 { border: 1px solid green; border-radius: 30px; } 개별 설정 그냥 border-radius 속성을 사용하면 모서리 네 개 모두 똑같이 둥글게 되는데요. 각 모서리를 개별 설정할 수도 있습니다. h1 { border: 1px solid green; border-top-left-radi..
boder(테두리) 설정 다른 속성들과 마찬가지로, 테두리를 설정해주는 방법도 다양하다. 한 줄에 끝내기 가장 일반적인 방법은 border 속성으로 한 줄에 다 쓰는 것 이 방식을 사용하면 위, 아래, 왼쪽, 오른쪽 모두 같은 테두리가 생긴다. 값을 쓰는 순서는 굵기, 스타일(실선, 점선 등), 색이다. 명확하게 나누기 다른 방법은 border-style, border-color, border-width 속성을 써서 테두리의 스타일을 하나씩 지정해주는 것 다채로운 테두리 지금까지는 4면의 테두리가 모두 같았는데, 다 다르게 설정해주고 싶으면 이렇게 하면 된다. 테두리 없애기 어떤 요소들(예: 태그)은 기본적으로 테두리가 설정되어 있다. 이런 요소들의 테두리를 없애고 싶으면 직접 border 속성을 설정해주면 되는데. 두 가지 방..
overflow 처리_4가지 옵션(visible, hidden, scroll, auto) overflow에 대해 배워보자. 코드 작성은 이렇게 하면 된다. overflow: ~~ 이 ~~에 들어갈 수 있는 옵션을 총 4가지이다. 옵션 1: visible visible 값을 사용하면 넘쳐나는 내용물이 그대로 보인다. 따로 설정해주지 않으면 이게 기본값! 옵션 2: hidden hidden 값을 사용하면 넘쳐나는 부분을 아예 숨겨줄 수도 있다. 옵션 3: scroll 내용물을 숨겼다가, 사용자가 스크롤을 하면 볼 수 있게 해주는 방법도 있다. 옵션 4: auto scroll과 거의 똑같은데, 한 가지 차이점이 있다. scroll은 항상 스크롤바를 보여주고, auto는 내용물이 넘쳐날 때만 스크롤바를 보여준다. * 참고로 Mac OS에서는 스크롤을 할 때만 스크롤바를 보여주는 경향이 있기 때문에 ..
width, height_max, min 설정 = 가로 길이, 세로 길이 텍스트 요소의 가로 길이(width)와 세로 길이(height)를 설정해보자. 이미지 사진의 크기도 똑같이 css에서 설정할 수 있다. 최소, 최대 세로 길이 min-height, max-height로 요소의 최소, 최대 세로 길이를 설정할 수 있다.
폰트 종류, Google fonts, Google fonts 적용하기 이 외에도 여러 폰트가 있다. 컴퓨터에 이미 저장되어 있는 폰트 외의 폰트도, 직접 제공해 준 뒤 적용 가능하다. 아래는 폰트를 찾을 수 있는 사이트이다. 구글에서 제공하는 폰트들 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 적용법도 간단히 설명하자면.. 먼저 사이트에 들어가서 원하는 폰트를 찾는다. 그 폰트를 클릭하면 다음과 같은 정보들이 나온다. 사진에서 표시된 저 link를 복사해서 붙여넣어주면 된다. 그리고 밑에 나와 있는 CSS rules를 참고해서 코드를 작성해주면 된다. 이 경우에는 이렇게 작성해주면 될 것이다...

728x90
반응형
LIST