본문 바로가기

CSS23

(*매우중요) CSS - box model(박스 모델) (*매우중요) CSS - box model(박스 모델) #1 box model 기본 원리 content < padding < border(박스의 기준이 되는 테두리) 2023. 1. 7.
CSS - css적용해도 변하지 않을때, %원리, 셋트로 이용하는css, css적용 확인 CSS css를 본격적으로 활용하기 시작하면서 더욱 이해도와 숙련도가 낮다는 것을 알게되었다. css는 웹에 있어서 정말 중요한 요소임에도 이해도가 없으니 더 익히려는 노력을 해야겠다. #1 css 적용했음에도 변하지 않을때 1)기본케이스 css는 기본적으로 부모요소를 따른다고 한다. 간단해 보일지 모르겠지만 이것은 정말 중요하다. 가령 라고 했을때 css의 선택자로 baby에 적용시킬 것을 썼음에도 적용이 안되었다면 body태그에서 무언가 적용이 되어있어서 막힌것이고 body태그를 건드려도 변화가 없다면 더욱 상단인 html태그에 의해 무언가 막힌것이라고 해석하면 되겠다. 이게 가장 기본이고 2)응용케이스 만약 1.html이라는 파일에서 2.html이라는 파일을 iframe태그로 불러와서 사용중이라면 .. 2023. 1. 7.
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.

티스토리툴바