CSS25 CSS - 정렬 CSS - 정렬 #1 기본 배경 block 요소 - 가로로 끊임없이 이어지는 하나의 블록이다. inline요소 - 자신의 영역만 차지하고 뚝뚝 끊어진다. 그리고 오른쪽으로 끊임없이 가다가 벽을 만나면 아래로 떨어져서 왼쪽부터 오른쪽으로 다시 진행된다. #2 내가 원하는 위치에 무언가를 옮기려면? 1) flex의 기본원리는 컴퓨터 자체는 “대각선 이동”이 없다. 따라서 내가 왼쪽 최 상단에서 중앙으로 어떤 요소를 이동시키길 원한다면 가로로 한번 보내고, 그 다음에 정 중앙에서 아래로 내려 보내야한다. 혹은 아래로 내려보내고 오른쪽으로 중앙을 향해서 보내는 방법도 사용이 가능하다 일례로 왼쪽 상단에 있는 박스를 정 중앙으로 보내는 것은 이렇게 할 수 있다. display: flex; flex-directio.. 2022. 12. 30. CSS - border-box, content-box 실무에서는 어떤걸 적용하는가 CSS #1 html 태그의 구성 실무에서 사용하는 css는 활용하기에 따라 다르겠지만 기본은 border를 기준으로 한다고 한다. Html 태그들은 모두 “박스” 모델로 이루어져 있다. margin - 박스의 바깥 여백 border - 박스의 기준이 되는 바깥 테두리 padding - 박스의 안쪽 여백 content - 박스의 내용 가장 안쪽이 content이고, 가장 바깥이 margin 까지의 순서라고 생각하면 된다. 이것은 모두 박스모양, 네모모양이다. #2 실무에서의 디자이너와의 협업을 위한 팁 1)정석 (border-box) 디자이너가 디자인 시안을 주면, 디자이너에게 받은 화면의 크기와 일치시켜야 하기때문에 border-box를 사용한다. border-box는 border가 “고정”이 되고, .. 2022. 12. 30. css - Transition Transition 전환효과에 대해서 설정한 만큼 텀을 주고 설정한 효과로 전환이 되게끔 하는 것 Property name(재산,소유물등) | Duration(지속기간) | Timing Function(시기) | Delay(지연) 2022. 11. 18. css - padding padding -padding은 근본적으로 설정된 위치에 대해서 설정한 값만큼 여유분을 가지게 되는 기능이다. #1 Apply to all four sides padding: 10px; #2 vertical(세로) | horizontal(수평|가로) padding: 5px 10px; #3 top | horizontal | bottom padding: 1px 2px 2px; #4 top | right | bottom | left padding: 5px 1px 0 2px ; 4개를 모두다 사용할때는 위에서부터 시계방향으로 돌아가며 적용된다고 생각하면 된다. 2022. 11. 17. 이전 1 2 3 4 5 6 7 다음
