본문 바로가기

분류 전체보기260

CSS 가상 요소 선택자 (22.09.28 TIL) 오늘 진행했던 과제 중에 가상 요소 선택자라는 처음 보는 속성이 등장해서 정리 겸 til 을 작성한다! CSS 선택자 중에는 가상 클래스 선택자, 가상 요소 선택자 라는 것이 있다. 선택자는 타겟이 있어야 한다. id 선택자는 id가 타겟이고, class 선택자는 class 가 타겟이다. 이 맥락에서 본다면 가상 선택자는 실제는 없지만 가상으로 만들어진 무언가를 타겟으로 선택한다는 것이 된다. 가상 클래스 (Pseudo-Class) 는 어떠한 속성이 실제로 마크업 상에는 명시되지는 않은 속성을 지칭하는 말이다. 작성자가 지정한 이벤트 (예를 들어 마우스를 올려놓았을 때나, 클릭을 했을 때) 가 발생한 그 순간 자체를 하나의 속성으로 본다는 것이다. 이러한 순간적인 상태를 선택하여 css 를 적용하기 위해.. 2022. 9. 28.
'웹디자이너를 위한 HTML5' 를 읽고 웹디자이너를 위한 HTML5 : 네이버 도서 네이버 도서 상세정보를 제공합니다. search.shopping.naver.com 마크업 언어의 간략한 역사 최초의 공식적인 HTML 표준은 IETF (Internet Engineering Task Force) 에 의해 만들어진 HTML 2.0 이었다. 그 후 W3C (World Wide Web Consortium) 가 설립되면서 IETF 의 역할을 대신하였고, 이후 HTML 권고안은 W3C 에서 발표하고 있다. 하지만 W3C 가 발표하는 이후의 HTML 시리즈는 인터넷 익스플로러에서 볼 수 없는 문제, 기존의 웹 콘텐츠나 이전 버전의 HTML 과도 호환되지 않는 문제 등 실제 현업에서 사용하는 웹 디자이너들에게 불편함을 안겨주었고, 이는 WHATWG (Web.. 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.
9월 두 번째 주간회고 📚 220919-220923 나를 와카 타임 17위에 진입하게 한 프로젝트 기간의 위엄..^^ 분명 저번주에는 48위였는데 (...) 근데 이 리더보드 집계 기준이 'Last 7 Days From Yesterday' 던데 내 대시보드에서 보면 77시간이어서 이왕이면 이걸로 올려줬으면 싶은 맴.. 하핳 너무 이런 시간에 집착하지 않으려고 하는데 10위 안에 들면 소고기를 먹을 수 있다는 약속이 걸려 있어서 더 열심히 보게 된다ㅋㅋㅋ (거의 소고기에 미친 사람ㅎ) 이번 5주차는 따로 강의 영상을 학습하는 것이 아닌 개별로 프로젝트를 하는 기간이었다. 4주 동안 배운 자바와 Gradle, JUnit5, Swing GUI 등을 이용하여 CRUD 가 구현되어 있는 프로그램의 기획부터 설계, 개발까지 모든 과정을 .. 2022. 9. 24.

티스토리툴바