[CSS]li속성 정렬, 줄간격 맞추기, 단락의 두 번째 줄부터 들여 쓰기
ul, li 작업중에 난관에 봉착 원했던 모습은 위의 스타일인데 아무것도 적용하지않았을 시 아래와같은 모양이다. 구글링을 하고싶은데..해결방안에 대한 검색어가 어려웠다.ㅋㅋㅋㅋㅋ 단락의 두번째줄부터 들여쓰기? 이게 제일 유사한 검색어같다. 해결방안은?! ul 과 li에 아래와 같은 작업을 해준다. ul { list-style-position: inside; text-indent: -18px; padding-left: 18px; } .detail-caution-list > li { font-size: 12px; font-weight: 400; list-style: inside; margin: 1rem 0; line-height: 22px; }
[CSS]position absolute - position relative
position absolute는 가장가까운 relative 를 가진 부모 기준으로 움직인다. .nav__notification { background-color: tomato; width: 30px; height: 30px; border-radius: 15px; display: flex; justify-content: center; align-items: center; color: white; font-weight: 600; position: absolute; right: 5px; } 위의 문제점? position absolute가 적용이 body에 되버려서 body기준으로 right 5px인것 position relative를 그럼 그위의 부모에다가 적용을 또시켜야됨 => 적용시키니 위치가 변경됨 ...
[CSS] Grid 레이아웃 공부2 Template areas, auto-fit, min-max
Template areas 초기세팅 HEADER MENU CONTENT FOOTER ㅋㅋㅋㅋㅋ 요딴짓을해보면? .container div { text-align: center; color: #f2f2f2; font-size: 2em; } .container { display: grid; grid-gap: 3px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 40px 200 40x; grid-template-areas: "h h h h h h h h h h h h" "m c c c c c c c c c c c" "f f f f f f f f f f f f"; } .header { background-color: red; grid-area: h;..
[CSS] Grid 레이아웃 공부
- 노마드코더 클론 코딩을 통하여 공부중이다. - CSS Flexbox, Grid 공부 생각보다 CSS가 알아야할것들도많고 중요하며 구현하는데 시간도 너무 오래걸림을 알았다. 코드스테이츠에서 많이 가르쳐준게 없기에 스스로 학습을 해야한다. 열심히 배워서 팀원들에게 해가 되지 말아야겠다. Grid 시작은 6개의 항목을 감싸는 큰 컨테이너를 만들어줘야한다. => 부모컨테이너. Grid 작업은 항상 부모컨테이너에서. 빈깡통일때? dispaly : grid; 와 grid-gap: 3px 만줬을때 (아주기본) => 아래 하얀색 여백이 생기며 row방향으로 정렬됨 1 2 3 4 5 6 세로모양으로 나오게하려면 1 2 3 4 5 6 display: grid를 꼭 사용해줄것 grid-template-colums 혹은 ..
twittler 만들어보기(와이어프레임 설계, 구조잡기)
아래의 샘플을 보며 직접 비슷하게 만들어보는 과제를 받았다. 페어와 함께 진행하는 작업이였다. 트윗 년도와날짜를 입력하는 부분에서 오른쪽으로 이동이 안되어 애를 먹었다. 이부분에서 오늘 배운 flexbox응용을 해봤더니 원하는대로 모양이 나와서 무척 기뻤다. 아래는 우리가 만든 트위틀러다. 주어진 시간이 두시간밖에안되서 완성도가 조금 아쉽지만. 그래도 나름 비슷하게 만들었다! 아래는 페어님과 사용해본 코드다 이전에 git 과제를 함께했던 다른 페어님께 요청드려 그분 코드와 우리가 만든 코드를 비교해보니 우리가 작업한 코드는 class,id 설정이 너무 중구난방이였다. 와이어프레임 설계를 했던것에 CSS를 접목해보니 구현되지않아 그자리에서 다시 수정수정수정...하다보니 중구난방이 된 것 같다 ㅠㅠ 와이어프..
지난주 맛보기식 HTML과 CSS는 그다지 어렵지않았었는데 오늘 학습한 내용은 읽어도 쉽게 이해되지않았다. 개인적으로 CSS는 글보다는 유튜브로 공부하는게 훨씬 좋은 공부법같다. 아니면 Codepen을 사용하여 직접 이거저거 만져보는것도 좋은 방법같다. 기본문법, 선택자 : CSS 1~8까지 선택자에 대한 설명이 쉽게되어있다. https://www.youtube.com/watch?v=H0mfQZeZTug&list=PL-qMANrofLyvQ6FuaIe3YRRX82eISDy11&index=121 flexbox : 20분짜리 영상인데 글로 읽을때는 이해가 안됬던 말들이 쉽게 이해됬었다. 추천하는 영상. https://www.youtube.com/watch?v=7neASrWEFEM&t=1201s