프론트엔드/CSS5 [CSS] overflow 이용해서 스크롤바 생성하기 >> overflow 속성을 이용하여 생성 가능하다- 자식요소의 크기가 부모 요소의 크기를 초과했을때 스크롤바를 생성하여 제어할 수 있다.- 수직방향, 수평방향, 그리고 두개 방향 모두를 제어할 수도 있다. >> overflow-x- 가로로 스크롤바 표시 >> overflow-y- 세로로 스크롤바 표시 >>overflow- 두 방향 모두 표시 >> overflow:scroll- 다음과 같이 작성해야 크기를 초과했을 때 스크롤바를 생성할 수 있다. >> overflow:auto- 내용물이 경계를 넘칠때에만 스크롤바가 붙는다. >> overflow:hidden- 내용물이 크기를 초과하더라고 스크롤바가 나타나지 않는다. 2024. 10. 20. [CSS] "display:flex" - flexbox 이용하여 가운데 정렬하는 법 >> display: flex- 하위 요소들을 똑같이 한줄에 배치하지만 정렬이 틀어지지 않고 유지되도록 한다.- flex라는 말처럼 유연하기 때문에 화면에 맞춰서 정렬이 되어 레이아웃에 용이하다.- 기본적으로 가로축이 기준이다. (flex-direction 속성을 이용해 변경 가능)- 이 속성을 사용할 때는 해당 요소의 직접적인 부모요소(상위요소)에 지정해야한다. >> display: flex- 위와 같이 작성하여 display 속성을 flex로 적어줘야 함 >> flex-direction- 내부 요소들의 정렬방향을 적어줘야 함(기본적으로 가로축(row)정렬임)- flex-direction : row = 가로축 정렬- flex-direction : column = 세로축 정렬 >> justify-cont.. 2024. 10. 20. [CSS] Display 속성 중 inline과 block의 차이 >> inline과 span 태그- span 태그의 display 속성이 기본적으로 inline이다.- span 태그는 너비오 높이를 가지지 못한다. 즉, 텍스트를 작성하는데 주로 사용된다.- 이때 span 태그의 display 속서을 block로 바꾸게 되면 너비와 높이를 가지도록 변화시킬 수 있긴 하다. >> block과 div 태그- div 태그의 display 속성이 기본적으로 block이다.- div 태그는 너비와 높이를 가진다.- 이때 div 태그의 display 속성을 inline으로 바꾸게 되면 너비와 높이를 가지지 않도록 변화시킬 수 있긴 하다. ++ span과 div에 대해 작성한 글https://zldn.tistory.com/56 >> 실행화면 1. div와 span의 display.. 2024. 10. 2. [CSS] div 크기 조정하는 방법 >> div- div 태그는 기본적으로 높이와 너비를 가진다.- font-size = div 태그 내에 작성한 글씨의 크기- width = div 태그의 가로폭 (크기를 직접 지정할때는 px단위로 쓰는것을 주의)- height = div 태그의 세로폭 (크기를 직접 지정할때는 px단위로 쓰는것을 주의)등등 더 많지만 필요한건 그때그때 더 찾아보기 ! -> style.css 코드 : 배경색만 지정했을때- 한줄이 쭉 div로 인지되기 때문에 글씨와 별개로 배경색이 길게 지정됨div { background-color: aquamarine;} : 글씨크기, 가로, 세로를 지정했을때- 코드를 쳐보면서 출력되는 화면을 확인하며 알맞은 크기로 맞춰나가면 된다.div { background-color: aquama.. 2024. 10. 2. [CSS] CSS란? + HTML에 CSS를 적용하는 방법(CSS 작성법) >> 웹페이지를 꾸미는 것(Awesome 하게 만들기)- cascading style sheets의 약자로 cascading, 말 그대로 순차적으로 적용되는 스타일시트이다.- 그렇기때문에 코드를 중복해서 작성하면 가장 나중에 작성한 코드가 반영이 된다는 점을 조심해야한다.- 색상, 크기, 폰트, 레이아웃 등의 시각적 표현을 의미한다.- css는 없는 옵션을 작성해도 에러를 뿜지 않는다. -> 디버깅 시 오류를 찾기 어렵다는 점도 조심해야한다. >> inline 방식- body 태그 내에서 div 태그 안에 style이라는 속성을 작성하여 직접 값을 입력하는 방법- inline 방식은 우선순위가 제일 높아 항상 반영됨 -> html의 코드- body에서 div를 이용해 안녕하세요 라는 단어를 띄우고 div.. 2024. 10. 2. 이전 1 다음
