본문 바로가기

전체 글

 (97)
flex 관련 이론 (3) align-self - 각각의 flex 아이템들의 교차 축 정렬 방식을 제어할 때 사용한다. flex-grow - flex 아이템이 기본 크기보다 커지게 할 때 사용하며, 컨테이너 내부에서 할당 받는 공간을 상대적으로 정의할 수 있다. - 2번째와 4번째 flex 아이템의 크기가 다른 flex 아이템에 비해 커졌으며, 4번째 아이템이 첫번째 보다 2배 큰것을 볼 수 있다. - 컨테이너의 크기가 작아지게되면 작동하지 않는다. flex-shrink - flex-grow 속성과 반대로 작아지게 할 때 사용한다. - 컨테이너의 너비가 좁을때 작동하며, 넓어지게되면 작동하지 않는다. flex-basis - flex 아이템의 초기 크기를 결정한다. 단위가 있는 값을 넣어야 한다.( 예 : px, %) order -..
flex 관련 이론 (2) 메인 축 정렬 - 메인 축 정렬 속성은 justify-content로 할 수 있으며 기본 속성은 flex-start이다. - flex-start : 메인 축 시작점을 기준으로 정렬 flex-end : 메인 축 끝을 기준으로 정렬 center : 메인 축 중앙 정렬 space-between : 좌우는 축의 시작과 끝에 배치하고 나머지를 여백을 주며 정렬 space-around : 각 요소의 좌우에 같은 여백을 주며 정렬 space-evenly : 모든 요소에 같은 여백을 주며 정렬 교차 축 정렬 - 교차 축 정렬 속성은 align-items로 할 수 있으며 기본 속성은 flex-start이다. - flex-start : 교차 축 시작 점을 기준으로 정렬 flex-end : 교차 축 끝을 기준으로 정렬 ce..
flex 관련 이론 (1) Flexbox - 화면의 크기가 동적으로 변하더라도 요소를 효율적으로 배치하기 위해 사용한다. - 블록 요소를 사용했기 때문에 위와 같이 세로로 정렬이 되어있다. 이때, 부모요소에 display:flex 를 입력한다면 다음과 같이 정렬이 된다. - 자식요소들에 display:inline-block을 입력한것 처럼 정렬이 되어있다. 하지만 큰 차이점은 다음과 같다. - inline-block 속성을 줬을 경우에는 자식요소들이 부모요소보다 차지하는 크기가 더 커져 아래로 내려간 모습을 보이지만 flex 속성을 줬을 경우에는 부모요소의 크기에 맞춰서 자식요소들의 크기가 자동으로 줄어들며 정렬이 된다. 메인 축과 교차 축 - flexbox에는 메인 축과 교차 축이 있는데 기본적으로 메인 축은 row(가로)이며 ..
정렬 관련 복습 - 수직 또는 수평으로 정렬하고 싶을 경우에 대한 복습 - 블록요소와 인라인 요소일 때를 구분하여 정리했다.
Modal 실습 - input 태그와 label 태그를 이용하면 간단하게 modal창을 만들 수 있다. - view를 누르면 창이 생성 되고, 화면 밖의 검정색 배경을 선택하거나, x버튼을 클릭하면 창이 닫히게 된다.
포트폴리오(싱글페이지) 제작 실습 - 코드 입력 - 웹 페이지 화면 - section 태그로 내용별로 구분하여 만들고 유튜브는 iframe 태그를 이용하여 붙여 넣었고, shadow 속성, float 속성, position 속성 등을 이용하여 배치를 했다.
CSS (9) shadow 속성 - 태그에 그림자를 부여해주는 속성 - 글자에 그림자를 부여하고 싶을 경우 text-shadow 속성을 사용하고 박스에 부여하고 싶을 경우에는 box-shadow를 사용한다. - 속성 값은 오른쪽 아래 흐림정도 색상 순으로 입력한다. gradient 속성 - 2가지 이상의 색상을 혼합해서 사용하고 싶을 때 사용하며, 방향 설정도 가능하다. - 모양과 방향을 설정하고, 원하는 퍼센트 마다 색을 정해줄 수 있다. - 처음에 설정하기는 힘들기 때문에 쉽게 설정할 수 있는 사이트를 이용하는것이 도움이 된다. 아래 링크를 들어가면 쉽게 설정할 수 있다. https://www.colorzilla.com/gradient-editor/
CSS (8) overflow 속성 - position 속성이 absolute인 자식요소들이 부모요소의 크기를 넘어선 위치에 있게되면 위의 그림처럼 넘치게 된다. 만약, 넘치는 요소들을 안보이게 하고싶다면 overflow 속성을 사용하면 된다. - 위의 그림처럼 overflow 속성에 hidden 값을 주게 되면 넘치는 부분이 보이지 않게 된다. - 넘치는 부분을 보여줘야 하는 상황이라면 overflow 속성에 scroll 값을 주어 위의 그림처럼 스크롤 바가 생기게해서 스크롤을 하면 내용들을 볼 수 있게 된다. 이때, overflow-x, overflow-y 속성을 사용하면 x축 또는 y축에만 스크롤이 생성되게도 할 수 있다. float 속성 - 요소들을 왼쪽 또는 오른쪽으로 배치하려고 할 때 사용한다. 구분을 위해..

티스토리툴바