TIL
TIL 13 :: CSS 속성 선택자 + CSS Diner
이전에 가상클래스와 가상요소의 종류에 대해서만 짧게 포스팅 했었는데 오늘은 자주 쓰이는것과 관련된것들에 대해 정리해보았다. 이전 포스팅(가상클래스? 가상요소?)를 보려면 여기로👈 속성 선택자란? 태그의 이름, 클래스 이름, ID 이름 외에도 속성으로 접근하는 선택자이다. 속성 선택자 종류 작성법 의미 태그[속성이름] 속성이름 에 해당되는 속성을 가진 태그를 모두 선택합니다. 태그[속성이름="변수"] 속성이름 의 속성값이 변수와 일치하는 태그를 선택합니다. 태그[속성*="변수"] 속성 의 속성값이 변수 를 포함하는 태그를 선택합니다. (문자열) 태그[속성^="변수"] 속성 의 속성값이 변수 로 시작하는 태그를 선택합니다. 태그[속성$="변수"] 속성 의 속성값이 변수 로 끝나는 요소를 선택합니다. 태그[속..
TIL 12:: 실습과 코드리뷰
주어진 피그마에 맞게 만들어보는 것이었다. 이전에 수업 첫날 혼자 만들어서 포스팅 했었는데 3주동안 수업 들은 내용을 기준으로 새로 만들어서 코드리뷰를 받아봤다. 내 코드 하나하나를 보여준다는게 굉장히 민망하긴 했는데 HTML,CSS에 있어서 기존 방법이 웹표준에 적합한지 야매(?)로 하고있는게 아닌지 마음 한 켠에 걱정이 있어서 잘 하고있는가에 대한 검사 차원에서 코드리뷰를 받았다. 내 코드 리뷰 👍 Good! 1. html, css validator 통과했다. -> 기본적인 것 2. 해당 영역을 article로 지정했다. -> 어디에 가도 독립적이게 사용될테니 article이 적합하다. 3. a태그로 padding을 주어 버튼 모양을 만들었다. -> 수정이 있을 때 유연하다. padding값을 주어 ..
TIL 10 :: Notion으로 이력서 만들어보기
해봄님의 노션특강을 듣게 되었는데 이때까지 내가 알던 노션은 노션이 아니었다(?) 특강 듣는 내내 '난 이때까지 뭘 써온거지? 이렇게 다양한 노션을 고작 메모장으로만 썼다니!!!' 하면서 감탄했었다. 1️⃣ Notion이란? 노션이전에는 코드에디터들을 개발하다가 노코드툴을 만들어 개발자를 타겟으로 하지 않고 오히려 개발 생태계에 영향력을 행사하게 되었다. Q. 노션이 잘 된 이유는? A. 쉽다! 있어빌리티! 커뮤니티! 이 3개 때문이다. (saas) 2️⃣ Notion의 구조 워크 스페이스 > 섹션 > 페이지 > 블록 워크 스페이스, 섹션 : 노션 admin에서 관리하는 파트 ( 딥하게 파고들고싶을때 알아볼것) 페이지 : 종이 → 디렉토리 → 폴더 → 탐색기(Finder) 블록 : 페이지 안의 모든 것 ..
Til :: overflow:hidden 🆚 display:none
overflow:hidden 🆚 display:none 두 태그 다 사용해본적이 있는데 요소들을 보이지 않기 위해 사용했지만 그 차이에 대해 깊게 알아본적이 없어 이번에 알아보고자 한다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem eligendi ipsam unde minus quae quod maiores quas in enim quos animi totam provident quisquam doloremque, sunt sed, vitae amet consequatur! 이렇게 영역과 콘텐츠가 있을때 영역 바깥으로 글자가 나온것을 확인할 수 있다. overflow 정해진 블록보다 그 안의 콘텐츠가 더 클 때 지정하는 처리법이다. 적용 ..
TIL :: block vs inline vs inline-block의 차이점에 대해 1분안에 말하시오.
HTML에서 구조를 짜면 어떤 태그는 일렬로 있고, 어떤 태그는 내용에 한 글자만 있다고 다음 줄로 넘어가있는 걸 볼 수 있다. 조금 배우고나면 차이에 대해서는 알지만 정확한 설명이 아직 단번에 나오지 않아 정리해보았다. block 화면을 수직 분할 (한 줄을 모두 차지) -> width / height 지정 O inline 화면을 수평 분할 (한 줄에 여러 inline 요소가 배치됨 == 글자를 생각하면 된다) -> width / height 지정 X inline-block inline의 수평 분할 특성 + block의 크기 지정 가능 1. Block-level elements 블록요소는 한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소들을 의미한다. 언제나 새로운 라인에서 시작하고, 좌우..
6일차 :: section? article? div?
section들을 공부하다보면 section을 써야할지 article, div? 아니면아예 없이? 이렇게 고민하게 된다. 그럴땐 구분하기 쉽게 구역의 주제가 명확하면 section, 디자인적으로 나뉘어있고 도저히 의미 구분이 어려우면 div라고 생각하면 된다. 특히나 이번 과제를 하면서 게임 홈페이지들도 찾아봤었는데 게임을 거의 하지 않기에 볼 일이 없었는데 하나의 그림처럼 배경이나 영역이 자연스럽게 이어지는 듯 하게 보여준다. header 로고 같은 경우 을 사용한다. 제목 태그로 텍스트만 들어갈 수 있다고 생각했는데 헤더에 상단로고에서도 쓰인다고한다. 그리고 우측에 검색, 장바구니, 마이페이지를 묶어 위젯이라고 한다. main 하나의 큰 section안에 각 article을 넣는다. section안에..
5일차 :: CSS
✍CSS(Cascading Style Sheet) 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. CSS의 궁극적인 목표: 어떤 브라우저에서도 동일하게 보여야한다. 그래서 reset.css 같이 값을 바꿔준다. div { background-color : orange; } selector : 선택자 property : 속성 value : 값 { 속성 : 값; } : 선언문 선택자 종류 * Universal Selector(전체 선택자) p, section, ul ... Type Selector(태그 선택자) .클래스명 Class Selector(클래스 선택자) #아이디명 Id Selec..
4일차 :: GET, POST 정리
백엔드 공부를 할때도 get, post로 정말 골머리를 앓았던 기억이 있다. 이걸 공부할때 request, response 와 같이 너무 헷갈려서 계속 물어보고 코드를 봤었다. 이전에도 포스팅했지만 GET, POST만 자세하게 정리해보고싶어서 또 써봤다. get과 post는 웹 개발을 할 때 주로 사용하는 HTTP 메서드로 클라이언트에서 서버로 요청할 때 사용한다. 예를 들어 설명하면, 회원가입은 post로 입력받은 정보들을 서버에 보내고 가입한 회원이 마이페이지에서 자신의 정보를 확인할 때 get방식으로 입력했던 정보를 보여주는 식이다. ✍ get : 요청 시 URL주소에 값(파라미터)을 담아서 전달하는 방식으로 클라이언트에서 서버로 정보를 요청할 때 사용한다. 특징 브라우저 히스토리에 남는다. 비밀번..
3일차 :: 나도 오픈소스 기여를 할 수 있다?!
오픈 소스(Open-source software) 공개된 소스 코드를 누구나 제한 없이 사용할 수 있는 오픈 소스 라이선스를 만족하는 소프트웨어를 의미한다. 원래는 오픈 소스 소프트웨어인데 대체로 오픈 소스라고 부른다. 오픈소스에 기여한다는 것 소스 코드를 수정하고 고치는 일뿐만 아니라 오픈소스 SW를 개발하는 개발자에게 도움을 주는 모든 행위가 오픈소스에 기여하는 일이다. 오류 제보, 주석, 문서화 작업에 참여하는 일도 포함된다. 오픈소스에 도움을 주는 사람을 통칭해 '컨트리뷰터'(Contributor)라 부르고, 소스코드를 수정하고 조절할 수 있는 권한을 가진 사람을 '커미터'(Committer)라고 부른다. 인기있는 프로젝트에선 2~3년 이상 활동을 해야 컨트리뷰터가 되기도 한다. 출처: 오픈소스컨..