🥬 상추의 공간

개발을 하는 도중... footer를 페이지 가장 하단에 고정시키고 싶은데 자꾸 어중간한 위치에 있는 것이다.. (페이지 중간쯤?) body, html의 height를 100%, footer를 postion: absolute하고 bottom: 0을 해놓은 상태인데도 말이다. 페이지를 개발자 모드로 봤더니 화면 전체크기가 1519x742로 설정되어 있는 것이다.(높이는 개발자 모드로 인해 좀 작아진 상태) '읭? body의 height를 분명 100%설정했고, 스크롤도 될 정도로 height가 꽤 되는데 height가 왜 742밖에 안되지???' 결론은 position: absolute 때문이었다. position 값을 주면(static제외) 레이아웃이 달라져(z-index 자연스래 적용돼서) height..

See the Pen 다중토글 by sanghee01 (@sanghee01) on CodePen.forEach를 이용해 모든 토글들에게 기능을 적용시킨다.(매개변수 이름은 tog라 지었다)각 토글(tog)이 click 이벤트를 받을 시,만약 현재 내용이 안보인다면 내용이 보이도록 show class ( display:block )를 넣고내용이 보인다면 안보이도록 show class를 제거한다. (default는 css에서 display:none처리를 했다)이 기능은 element.toggle( )를 이용하였다.  cont같은 경우 tog.nextElementSibling이라 작성하였는데,클릭한 tog의 cont 값을 가져오고 싶어서 이렇게 작성하였다.  Element.classList - Web API..

Window powershell 7.2.1 기준 터미널 명령어 정리 *powershell은 cmd와 달리 운영체제 모든 터미널에 접근할 수 있어서 좋다. 사용자 메뉴얼 명령어 man {명령어} Manual 약자 어떤 옵션들이 있는지 보고 싶을 때 사용 get-help와 역할 동일 설명에서 나가고싶으면 '단축키 q' 를 누르면 된다. ex) man clear => clear에 대한 설명 나옴 clear 터미널 내용 지우기 파일 시스템 탐색 명령어 pwd Print Working Directory 약자 현재 나의 경로를 알 수 있음 ls list의 약자 현재 경로에 어떤 파일과 폴더가 있는지 목록을 확인할 수 있음 특정 폴더 안 내용 보고싶으면 'ls {경로}' 또는 'ls {폴더}' -name : 이름만 ..

See the Pen modal by sanghee01 (@sanghee01) on CodePen.  display: none 속성을 이용한다. open 버튼을 누르면 modal 에 'display: none' class를 없애 모달창이 보이도록 하고close 버튼과 배경을 누르면 'display: none' class를 넣어 모달창이 안보이도록 한다.

이번 시간에는 기본적인 HTML tag를 알아볼 것이다. 제목 Tag 크기에 따라 ~으로 나뉜다. 본문 Tag : 단락 or 문단 : 형식화된 텍스트 : 줄바꿈 수행 그 외에 등이 있다 글자 Tag : 볼드체 : 이탈릭체 : 문장을 위로 : 문장을 아래로 : 밑줄 : 취소선 링크 Tag : 하이퍼 링크의 역할을 수행 href(Hypertext Reference) 속성 : 웹 사이트 주소를 정한다. target 속성 : 링크를 클릭했을 때, 해당 페이지를 어떻게 열 지 정한다. _self: 현재 탭에서 링크를 연다 _blank: 새 탭 or 새 창에서 링크를 연다. '상추의 tistory'를 누르면 새 탭에서 href 속성에 지정한 주소로 이동한다. 이미지 Tag : 이미지 넣고 싶을 때 사용 (종료 태그..

HTML 구조 다음은 기본적인 html 코드이다. 뭐가 뭔지 모르겠어도 한번 직접 분석해보자. Hello world! 크게 보면 태그 안에 , 로 나뉘어져 있다. 대체적으로 태그들이 열고 닫는 형태임을 볼 수 있다. 태그 처럼 그냥 혼자로만 닫는 태그(self-closing tag)도 있다. 몇몇 태그에는 부가적으로 속성이 있는걸 볼 수있다. 예를 들어 태그는 이렇게 lang이라고 부가적으로 붙는 게 있다. 이런걸 속성(attribute) 라고 부른다. 코드를 순서대로 분석해보자면 : '이것은 html문서다!' 라고 알려주는 역할이다. 첫 라인에 필수적으로 넣어준다. : html코드의 시작점. lang속성은 검색엔진에게 주된 사용언어를 알려준다. (한국어: ko, 영어: en, 일본어: jp ...) :..

organizations로 협업하는데 여기 repository에서만 commit하고 push를 하면 잔디가 안심어지는 현상이 일어났다. 먼저 내가 해결책을 찾는 과정은 이랬다. 1. 프로필에 있는 Contribution settings에 Private contributions가 체크 되어있는가? 이것이 체크 안되어있으면 Private가 되어있는 repo는 잔디가 안심어진다. 하지만 나는 여기에 있는 두개 다 체크를 해봐도 해결되지 않았다. 2. git repository email주소와 local email 주소가 같은가? 확인해보니 같았다... 다르면 심어지지 않는다. 3. 아래 방법은 fork한 repo에서도 잔디를 심을 수 있게 해주는 방법이다. 나는 fork한 repo가 아니지만 일단 해보았다. ..

웹사이트 구조 우리들이 흔히 보는 웹페이지는 이런 식으로 구성되어있다. (물론 무조건 aside가 무조건 있고 footer가 있는 건 아니다. 대략 이런식으로 구성되어 있다) 밑에 예시를 보자 대충 맨 위 색깔과 맞춰서 구분지어 놨다. 여기서 더 분할할 수 있고, 정답은 없다. 뭐든지 box model로 세분화해서 나눠보는 연습을 하는게 좋다. 여기서 box는 sectioning이 되는 것을 말한다.