PM 의 생활 PM 의 생활

CSS Selector여러 기능을 통해 CSS 적용할 대상을 섬세하게 지정할 수 있다. Combination여러 엘리먼트들의 스타일을 더! 더! 더! 세부적으로 선택하고 싶다면? Combination이 답! Combination: 셀렉터 간의 관계를 나타냅니다!- descendant selector (space): 자손태그 모두!- child selector (>): 아들태그만 (바로 밑 아들만)- adjacent sibling selector (+): 뒤에 바로 오는 태그- general sibling selector (~): 뒤에 오는 태그 모두 Pseudo-class: 엘리먼트 단위의 상태 제어기본적으로는 엘리먼트 단위로 상태를 제어한다. selector:pseudo-class { property:..

Layout 레이아웃무엇을 어떻게 논리적으로 구성할 것인지 고민중요한 것은 중요하게! 숨길 것은 적당히 숨기고! 등을 구성하는건 중요하다.마치 학창시절 깔끔한 필기노트를 보는 것과 같다. (성적과는 무관하지만....)- 어디에 위치시킬 것인지,- 블락과 텍스트를 어떻게 (상대적으로) 위치/정렬 할 것인지 레이아웃 대상: ElementBlock-level Elements : full width available , - , , , , , Inline Elements : , , Display 노출여부주로 자바스크립트 코드를 안보이게 한다. display:noneh1.hidden { display: none; }h1.hidden { visibility: hidden; } Width 콘텐츠 크기 고정/반응형이제는..

Default 규칙이 적용되어있을 뿐세부사항 디자인을 (거의) 모두 바꿀 수 있다. Icon Icon Reference: https://www.w3schools.com/icons/icons_reference.asp Link /* a tag Status a:link, a:visited, a:hover, a:active */a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } Listul { list-style: squ..

CSS 기본 3 부분에 대한 치트키입니다! 부가설명 빼고 문법만 딱 적어놓았습니다. :) - CSS Syntax - 박스모델과 레이아웃 - HTML 의 기본 텍스트/폰트 1. Selector- HTML element - ID: #id - Class: .class / element.center - Group: h1, h2, p 2. Style Sheet- External style sheet- External style sheet - Internal style sheet - Inline style✮ 적용 순서 (Cascading Order) Inline style (inside an HTML element) > External and internal style sheets (in the head secti..

1. 목표: 그리드 / 레이아웃기기나 환경에 따라 레이아웃 (화면구성) 을 바꿀 수 있도록 2. 가변 그리드웹페이지를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술Fluid Layout, Flexible Layout, Flexible Grid 일반적으로 12개의 칼럼을 가진 테이블처럼 사용한다고 한다. https://www.w3schools.com/css/tryresponsive_grid.htm 3. 뷰포트모니터나 기기의 화면을 통해 보이는 영역 / 화면에 보이는 영역을 제어하는 기술PC: 해상도 / MO: 실제 기기의 화면크기 - 크기와 비율 제어 - The width=device-width 너비 = 디바이스의 화면크기 - The ..

반응형 웹 만들기 (공부준비) 그간 서버 언어만 공부했는데, 실용적으로 웹 언어도 공부해보려고 해요! 그래서 대세인 반응형 웹 실습을 해보려고 마음먹었습니다~~~ :) DAY 1 ~ 20 까지 나눠주신 대로 차근차근 실습 진행하려고 합니다.반응형 웹 만들기 책으로 공부하시는 분 공부하다가 낯설고 짜증나서 덮으신 분 생초보인 저를 보면서 에너지를 얻어가시길 바래요 (지식은... 구글신에게... ) 우선 공부할 환경을 세팅했습니다. 이 책은 반응형 디자인 쪽 책이기 때문에, 웹서버 테스트 환경을 구축하는 것에 대해서는 자세히 말해주고 있지 않아서요~ (실습위해 웹호스팅 현금결제 or 1년무료사용 하다가는 스압으로 떨어져나가 공부 1달 미룬 장본인...)✮ 이럴 때는 생활코딩 웹서버 설치를 참고하시면 좋습니다..