본문 바로가기

TIL173

무사히 보낸 한 주 (22.09.29 TIL) 오늘은 6주차의 사실상 마지막 날이다! 이번주 과제들은 반응형 디자인으로 주어진 웹 페이지를 똑같이 만드는 것이었다. 사실 월요일에 css 게임을 한 후에 조금은 css 에 대해 알게 된 것 같다는 착각을 했었는데, 실제 구현 과제를 진행하면서 그것이 큰 착각이었다는 것을 깨달았다. 물론 css 게임을 하루 종일 했던 것은 큰 도움이 되었다. 이해가 가지 않던 속성들도 계속 반복하니까 어느 순간 이해가 되어 있더라. 하지만 실제 구현이라는 무대에 올라가니까 뭔가 막막한 기분이었다. 게다가 반응형 페이지를 어떻게 구현할 지도 몰랐고, 미디어 쿼리 라는 것이 있다는 것도 (물론 구글링을 하면 찾을 수 있지만 이 부분은 제외하고!) 몰랐어서 맨 땅에 헤딩하는 기분이라 더 당황했던 것 같다. 다행히 우리 동기들.. 2022. 9. 29.
CSS 가상 요소 선택자 (22.09.28 TIL) 오늘 진행했던 과제 중에 가상 요소 선택자라는 처음 보는 속성이 등장해서 정리 겸 til 을 작성한다! CSS 선택자 중에는 가상 클래스 선택자, 가상 요소 선택자 라는 것이 있다. 선택자는 타겟이 있어야 한다. id 선택자는 id가 타겟이고, class 선택자는 class 가 타겟이다. 이 맥락에서 본다면 가상 선택자는 실제는 없지만 가상으로 만들어진 무언가를 타겟으로 선택한다는 것이 된다. 가상 클래스 (Pseudo-Class) 는 어떠한 속성이 실제로 마크업 상에는 명시되지는 않은 속성을 지칭하는 말이다. 작성자가 지정한 이벤트 (예를 들어 마우스를 올려놓았을 때나, 클릭을 했을 때) 가 발생한 그 순간 자체를 하나의 속성으로 본다는 것이다. 이러한 순간적인 상태를 선택하여 css 를 적용하기 위해.. 2022. 9. 28.
html <img> 태그 / css background 속성 (22.09.27 TIL) html 에서는 img 태그를 사용해서 이미지를 넣을 수 있고, css 에서는 background: url() 속성을 사용해서 이미지를 넣을 수 있는데 각 속성들에 대해 정리해 보았다. 1️⃣ 태그 - html 문서에 이미지를 삽입하는 태그이다. - 주요 속성은 src, alt 가 있다. - src 는 이미지의 경로를 나타낸다. - alt 는 이미지를 표시할 수 없는 상황일 때 화면에 출력할 내용이다. - 그 밖에 width(가로 크기), height(세로 크기), loading(이미지 로딩 방식) 등의 속성이 있다. 2️⃣ background 속성 1) background-color - 배경색을 지정할 때 사용하며 기본 값은 투명 (transparent) 이다. 2) background-image: u.. 2022. 9. 27.
css 와의 거리감이 살짝 좁혀진 날 (22.09.26 TIL) 오늘은 드디어 대망의 html/css 첫 주였다. 아무리 스윙보다 낫다지만 그래도 css 에게 안 좋은 추억이 있었기 때문에 문제들을 얼른 풀어보고 싶다기 보다는 조금 회피하고 싶었다ㅎㅎ.. 어쨌든 해야하는 과제이기에 오전에 html 책을 읽고, 점심을 먹고 나서 오후 일과 시간에 css 과제를 시작했다. 퀘스트 과제 이름도 'css 마라톤' 이어서, 마치 마라톤처럼 쭉 달리면서 총 8개의 css 게임을 엔딩까지 깨는 것이었다. 처음에 가장 쉬운 난이도였던 css diner 부터 조금 헤맸을 때는 '역시 너무 어렵다' 라는 생각을 가지고 있었는데, 막상 깨고 나니까 그 다음의 Froggy 게임 부터는 조금 수월했다. 한 문제당 이해하고 다른 예시 찾아보고 외우고 하느라 진도는 조금 많이 느렸지만 말이다... 2022. 9. 26.
flex vs grid (22.09.25 TIL) 주말 강의 영상을 듣던 중 아샬 님이 요즘은 flex 보다는 grid layout 을 많이 쓴다는 얘기를 하셨다. 나는 flex 만 써보고 grid는 써 본 적이 없어서 정리 겸 til을 쓴다. 먼저 둘의 차이는 이렇다. flex 는 1차원적으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있다. (한 방향 레이아웃 시스템) grid는 2차원적으로 수평, 수직 영역을 동시에 나눌 수 있다. (두 방향, 가로-세로 레이아웃 시스템) 사진으로 보면 이런 느낌이다. grid 에서 2차원적으로 수평, 수직을 동시에 나눌 수 있다고 한 것은 행과 열을 지정할 수 있다는 얘기가 된다. grid-template-columns 속성을 이용하여 행을 지정할 수 있고, grid-template-rows 속성.. 2022. 9. 25.
다시 만난 CSS (22.09.24 TIL) 이미 이전 글에서도 많이 언급했지만 내가 개발자를 하기로 마음먹고 나서 코딩으로서의 첫 걸음마를 시작한 건 3개월간의 국비 수업이었다. 그래서 앞으로도 필요하면 국비 이야기가 많~이 등장할 예정이다. 어쨌든 국비 시작 전 2주 간의 여유로운 기간이 생겨서 미리 독학을 해보겠다고 자바와 html/css 영상을 유튜브로 찾아봤었다. 분명 영상으로 html/css를 보며 따라 했을 때는 너무 재미있고 이해가 잘 가서 즐겁게 했었지만 나는 몰랐다. 그건 그냥 따라 치기만 하면 결과물이 짠! 나오니까 재미있었다는 것을..ㅋㅋㅋㅋㅋ 그때는 격주로 금요일마다 과제가 주어졌다. 일단 우리는 강사님의 코드를 다 따라치고 수업을 제대로 들었다는 증거로 매일매일 제출해야 했기 때문에 아무 생각 없이 따라 치고 밤에 복습하는.. 2022. 9. 24.

티스토리툴바