개발 걸음마 중

CSS 속성 선택자(attribute selector) * [속성이름] - 해당 속성을 가진 요소를 모두 선택한다. [title]{ color: blue; } * [속성이름~="속성값"] 선택자 - 특정 문자열로 이루어진 단어를 포함하는 요소를 모두 선택한다. [class~="btn"]{ text-decoration:underline; } class="btn" /* 선택됨 */ class="btn reset" /* 선택됨 */ class="reset btn" /* 선택됨 */ class="btn-negative" class="btn-positive" * [속성이름|="속성값"] 선택자 - 특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 뒤에 하이픈(-) 기호가 있는 태그를 선택한다. [class..

CSS로 버튼(button) 속성 사용하기 * button - 사용자가 클릭할 수 있는 요소이다. - form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치할 수 있다. * button의 타입 - button : 기본 행동이 없다. 클릭했을 때 아무것도 하지 않는다. JavaScript와 연결하여 사용한다. ※ 양식 제출 용이 아니라면 타입을 꼭 button으로 지정하자! - submit : 기본값 / 서버로 양식 데이터를 제출한다. - reset : 과 동일하게 초기값으로 되돌린다. 버튼 누를 수 없는 버튼 ✏ 필수 입력 정보를 다 입력하지 않았을 때 사용했다가 입력한 후 해제한다. 🤔 vs 역할 하이퍼링크 사용자의 동작 실행을 위한 트리거 기능 다른 페이지 혹은 페이지 내의 특정 영역으로 이동..

CSS 변수와 함수 * :root - 전역 CSS 변수를 선언한다. - HTML 문서에서 HTML을 선택한다. - 하이픈 2개(--) 다음 속성 이름을 적어주고 콜론(:) 뒤에 속성값을 적는다. ✏ --속성이름:속성값 - 변수를 이용하면 일괄적으로 관리할 수 있어 유지보수에 용이하다. * var() - CSS 변숫값으로 지정할 수 있다. - 첫 번째 인수에는 가져올 사용자 지정 속성 이름을, 두 번째 인수에는 대체값을 작성한다. :root { --div-main-color: pink; } div { color: var(--div-main-color); } * calc() - CSS 속성 값으로 계산식을 지정할 수 있다. - +, -, *, / 사칙연산이 가능하다. - 해당 함수를 이용하여 서로 다른 단위..

HTML 구조 짜기 💭 실무에서는 웹 디자이너가 디자인 결과물을 넘겨주면 각 부분들을 어떤 요소로 구성할 것인지 '알아서' 구조를 짜야한다. 웹 페이지의 디자인을 받으면 곧바로 HTML 문서를 작성하지 말고 종이에 손글씨도 좋고, 전자기기에 써도 좋으니 전체적인 HTML 구조를 구성한 뒤 작업에 들어가는 것이 좋다고 한다. (물론 경력이 쌓이고 실력이 성장해서 안 적어봐도 알아요~하는 수준이 되면 좋지만,,) 내가 실습해본 페이지는 '위니브'의 '호두마켓'이라는 샘플 페이지다. 고양이가 너무 귀엽다. Today I Learn 🌸 처음에 나는 제일 상단에 위치한 을 로 묶었다. 앞뒤 내용들과의 문맥상 흐름이 같으면 을, 독립적이면 을 사용하면 되는데 나는 첫 번째 을 아래 게시글과 관계없는 메인테마라고 생..

CSS 아이템 배치 float - 물 위나 공중에 둥둥 뜨다. - 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌/우측에 배치되게 한다. - 해당 요소가 보통 흐름으로부터 빠진다. - display 속성과 함께 사용하면 display 속성이 무시된다. - width, height 설정이 가능하다. left : 왼쪽 right : 오른쪽 none : 기본값 ※ 주의 - 자식 요소들이 모두 float 속성을 가지게 되면 컨테이너 요소 높이에 자식 요소들의 높이가 포함되지 않는다. - float으로 콘텐츠를 띄울 경우 다음 내용이 빈자리를 채우려 올라오게 된다. * float 해제하기 ✏ 해결 방법 (clear-fix) 1. 부모 요소에 높이(height) 값을 지정한다. - 자식들이 변화무쌍한 경우..

HTML 레이아웃(Layout) 레이아웃 히스토리 1. 단순한 텍스트의 나열 - HTML 개념을 이용한 최초의 웹사이트 => http://info.cern.ch/ - 레이아웃 도구가 아예 없던 시절에는 텍스트의 정렬만 가능했다. - 이미지로 링크를 클릭해야 연결되어 볼 수 있었다. 2. 테이블로 레이아웃 구성 - table표 데이터의 본 목적과는 다르게 배치를 위해 테이블을 사용했다. - 여백을 표시하기 위해 투명한 gif로 만들어 넣었다. - 의미, 접근성에 대한 개념이 전혀 없던 시기이다. ※ '뉴스레터'는 아직도 테이블로 레이아웃을 구성하기도 한다. 3. 프레임으로 레이아웃 구성 - 여러 HTML 페이지를 frame을 사용하여 한 페이지에 결합하여 레이아웃을 만들었다. 4. div div div d..

크로스 브라우징(Cross Browsing)이란? 웹 페이지의 상호 호환성 = > 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹페이지를 제작하는 기법이다. 또한 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미한다. 이는 인터넷 환경 자체가 일반 데스크톱 웹 브라우저뿐만 아니라 모바일, 임베디드 기기, 홈네트워킹 용 장비 등 아주 다양한 인터넷 환경이 존재하며 일반인, 장애인, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다. CrossignBrowsing 가이드 요약 : ..

Reset CSS * 아직 CSS를 적용하지 않았는데 왜 스타일이 자동으로 지정되어 있을까? - 각 브라우저마다 기본적으로 제공하는 각기 다른 스타일이 존재한다. - 여백, 색상, 크기 등이 조금씩 다르다 보니 웹 디자이너의 디자인을 모든 브라우저에 구현하는 것이 어렵다. * Reset CSS - 기본으로 적용되는 CSS 속성들을 초기화하는 방법이다. ✏ 개별요소에 초기화 값을 하나하나 입력해도 되지만,, 아주 힘들고 번거로운 작업이.. ✏ 유명한 reset css 파일! https://meyerweb.com/eric/tools/css/reset/ https://necolas.github.io/normalize.css/ (지속적인 버전업! 추천!) https://csstools.github.io/sani..