오늘은 어제 네이버 뉴스 하고 하지못했던 왼쪽 중간 오른쪽 도면 작업을 했다
기존에 했던 실습과 비슷했다 늘 position에 어려움을 가지고 있었지만 이젠 많이 습득했다고 느낄 정도로 재밌게 실습했다.
기존에는 이미지가 있고 이미지 밖에 를글로 설명되있는 경우가 많았는데 이번엔 이미지 안에 글귀로 설명되있는 이미지를 소스를 짤때는 이미지와 텍스트에
position: absolute; 속성을 넣어주고 텍스트에 left:0 , bottom: 0을 넣어 왼쪽 아래 정렬을 해주니 이미지 안에 들어갔다 물론 따라하기는 쉽지만 강의를 듣지 않은 상태에서 직접 짜려고하니 조금 헷갈렸었다
그리고 a태그 자체가 주소를 넣어 다른 페이지로 가게 만드는 태그이다 보니 결과값을 보면 a태그로 감싸져 있는 부분은 커서가 바뀌면서 클릭이 가능하다
그런데 css에 속성값으로 cursor: default; 값을 넣어주면 커서는 변하지 않지만 클릭시 a태그의 특성으로 다른 페이지로 넘어가게 된다.
여기서 max-width: initial; 을 사용함으로써 각각의 li태그속 글자들이 길이가 전부 달라도 가장 오른쪽에 있는 아이콘은 항상 정렬됨을 알 수 있었다
강사님께서는 디자인작업할 때 max-width를 어느 타이밍에 써야할 지 잘아는것도 중요하시다고 말씀하셨다. 솔직하게 타이밍은 아직 모르겠다.
html, css 강의를 매일 들으면서도 신박하고 재미있게 배울 수 있어 정말 큰 행운이라고 생각한다. 벌써 한달이란 시간이 지났지만 짧은 기간안에 많은 것을 배웠고 이젠 응용할 수 있을 정도의 이해와 어느정도의 실력이 갖춰진것 같다 물론 한참 부족하고 또 부족하지만 절대 잊어버리지 않도록 매일매일 복습하고 또 복습하여 내것으로 만들 때 까지 노력할 것이다.
항상 좋은 강의 해주신 김인권 강사님, 그리고 아무것도 모른 상태에서도 힘을 불어넣어주시고 서포트 해주신 대구AI스쿨 관리자분들께 정말 감사드립니다. 늘 건강하시고 행복하셨으면 좋겠습니다. 행복한 주말 되세요!!