본문 바로가기

개발일지715

CSS - 중앙 정렬(완전 정중앙x)관련 활용 코드1 정 중앙 정렬 - 실패 하지만 외 적으로 유의미한 활용 코드가 있어서 주석과 함께 가져왔다. # index.html 나만의 일기장 나만의 일기장입니다. 원하는 색과 사이즈로 일기장을 커스텀 해보세요. have a Good Day😀 🌂쭈꾸미의 일기(제목) 오늘은 김치찜을 먹었다(내용) 내일은 이나니와 요스케를 먹고싶다. 2022년 7월 5일 날씨 흐림⭐️ # index.css * { box-sizing: border-box; margin: 0; padding: 0; } div.container { background-color: aquamarine; /* 수평정렬 셋트 start */ display: flex; flex-direction: row; justify-content: center; align-i.. 2023. 1. 7.
(*매우중요) CSS - block요소, inline요소 (*매우중요) CSS - block요소, inline요소 #1 block요소 1)특징 -블록 요소를 여러개 연속해서 쌓을 경우, 자동으로 다음 줄로 넘어간다. -좌/우 양쪽으로 늘어나서 부모 요소의 너비를 가득 채운다. -width, height 값은 box를 기준으로 먹여지는 값이다. block요소에는 적용된다. -display에 속성을 부여해서 block -> inline, inline -> block으로 변환이 가능하다. 예: display: inline; 그러면 이 명령이 유효한 한에서는 block요소도 inline요소로 속성이 적용된다. -vertical-align이 적용되지 않음 -test-align이 적용되지 않음 2)태그들 address, article, aside, audio, block.. 2023. 1. 7.
(*매우중요) 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.

티스토리툴바