둥글게 둥글게

* HTML/CSS 과제를 마치고 ▼▼▼ ① HTML/CSS 공부하면서 느낀 점 프론트엔드의 가장 기초가 되는 언어인 HTML과 CSS를 한 달 ~ 6주 정도 학습 하였다. 6주 동안 HTML과 CSS를 배우기에는 굉장히 짧고, 부족할 수 있지만 과제까지 마친 지금은 꽤 친해진 느낌이 든다. 수많은 조건을 이용해서 결과물과 똑같은 화면을 구현하는 것은 정말 쉽지 않지만, 잘 풀리지 않다가 해결했을 때의 기쁨은 말로 못할 정도로 좋았다. HTML과 CSS는 하나의 화면을 만들어도 다양한 방법으로 마크업 할 수 있기 때문에 정답이 없는 것 같다. 그래서 하나하나 풀릴 때마다 앞에 있는 벽을 뚫고 나아가는 느낌이 들어 정말 재밌었다. ② HTML/CSS를 공부하면서 어려웠던 개념과 이유 CSS를 공부하면서 어..

HTML 전역속성 기본 문법 * 전역속성 : 모든 태그에서 사용이 가능한 속성 * id : 고유식별자 (공백 x) * class : 접근자, 중복 가능 (공백 가능하지만, 띄어쓰기만큼 하나의 단어로 인식) * style : 태그 안에 사용 가능하지만, css 외부 시트를 가져와서 사용하는 것을 권장 * title : 화면에서 title 속성을 적용한 마우스를 올릴 경우, 지정한 내용이 뜸 ※ 부모 태그에 적용이 될 경우, 자식 태그도 상속받음 ※ But 자식 태그에 title 속성이 적용되면 자식에 지정한 내용이 뜸 * lang : 콘텐츠를 사용하는 사용자가 읽는 언어를 지정 (char = "utf-8" 과는 다름) * data - * : 실제로는 html에 적용되지 않음, 컴퓨터가 이해를 잘하도록 정리..

HTML 메타데이터 기본 문법 * → head는 화면에 나오지 않고, 페이지에 대한 메타데이터를 포함하는 구간 (html을 구성하는 조건들을 작성) * 의 주요 요소 ① : 브라우저의 제목 표시줄 ② : 빈 요소에 해당하며, name과 content 값을 함께 사용 - name에 지정되는 속성은 많으니, mdn(표준 메타데이터 이름)에서 하나씩 봐보자 * → 외부의 리소스를 연결하기 위해 사용 (가장 많이 쓰이는 css 스타일시트를 가져올 때 등) - href : 절대/상대 경로 작성 - rel : 현재 시트와 외부 경로로 가져온 파일이 어떤 관계인지 나타냄 * → html 파일은 외부 리소스를 가져올 수 있지만, 어떤 종류의 문서인지는 알지 못한다. 경로만 지정하여 알려줄 뿐. 따라서 type = "~..

HTML 폼 기본 문법 * input 종류 ① text : 문자열 입력 ② password : 화면에 개인정보 보호 차원으로 동그라미 표시로 나타남 ③ email : 이메일 형식으로 작성 유도 ④ tel : 웹 브라우저에서는 숫자로 입력하지 않아도 따로 오류가 뜨지 않음, But 모바일에서는 전화 형식으로 작성 유도 ⑤ number : 숫자 입력 or 화면에 화살표를 눌러 숫자 업/다운을 할 수 있음 ⑥ range : 범위를 나타내는 버튼이 생성, 값은 숫자로 전달 ⑦ date : 달력 생성 or 연월일 작성 가능한 화면 생성 ⑧ month : 달력 생성 or 연월만 작성 가능한 화면 생성 ⑨ time : 시분초 작성 or 시간 작성 가능한 표 생성 ⑩ submit : 제출 버튼 생성, 기본값 : "제출..

HTML 폼 기본 문법 * : 사용자가 작성한 정보를 전달할 때 사용 (ex. 회원가입, 로그인, 설문조사 등) → 체크박스, 라디오, 날짜, 시간, 버튼까지 모두 폼에 해당 * 사용 시 기본 문법 - name : 전체 form에서 input이 어떤 역할을 하는지 구분 (name 값은 겹쳐도 됨) - id : label 태그를 사용할 때, 어떤 input을 나타내는지 구분 (id 값은 겹치면 안 됨) - action : 정보를 최종적으로 전달하는 목적지 - method는 POST / GET으로 구분. → POST 메서드 : 대부분 POST 메서드로 만들며, 주소창에 값이 뜨지 않음 → GET 메서드 : 입력한 데이터가 주소창에 뜨며, 단순한 검색창일 때 사용 * 과 - label은 사용자가 화면을 볼 때..

HTML 구조 기본 문법 - : 자체가 block이며, 특정 구간을 그룹으로 묶을 때 사용 ※ 의미 없는 순수 컨테이너에 해당, 스타일링을 하기 위해 주로 사용 - : 자체가 inline이며, 주로 text의 일부를 꾸밀 때 사용 ex) 와 간단하게 사용 - semantic Web : 웹 구조를 생성할 때, 의미 있게 만드는 것이 좋다. → header, footer, nav 등을 사용 - 와 : 웹페이지의 머리(대문)와 바닥(출처, 번호 등) 부분에 해당 - : 탐색, 목록, 메뉴 등에 사용 - : 주요 내용과 간접적으로 연관되어 있는 내용을 주로 다루며, 보통 사이드바에 사용 ※ css 를 통해 웹페이지 오른쪽에 광고 등이 나타나도록 사이드로 많이 보냄 - : 나타내고 싶은 주요 콘텐츠를 사용, 오직..

HTML 텍스트 태그 기본 문법 * * - ~ : 제목 지정 - : 문단 (문장들의 집합) - : 개행 ※ br을 많이 사용하지 x, css를 사용 - : 미리 서식을 지정, 사용자 화면에 그대로 나옴(들여 쓰기까지) - : 비슷하지만 독립적이고, 단독적인 것들을 감쌀 때 사용. 은 요소를 설명할 때 사용 ex) , 간단하게 사용 - : 문단과 문단 사이를 나눌 때 사용 - : 약어를 나타낼 때 사용 ex) 간단하게 사용 - : 주소 사용할 때 (브라우저에 따라 기울임체로 화면이 보일 수 있음) - : 출처를 사용자 페이지에 보이게 할 때 사용 (큰 차이는 없지만, 브라우저에 따라 기울임체로 화면에 보일 수 있음) - : 역방향으로 글이 나오게 할 때 사용 - 와 : 는 특정 단어를 강조할 때 사용, 은..

HTML 관련 참고하기 좋은 사이트 ① 콘텐츠 카테고리 - 메타데이터 / 플로우 / 섹션 / 헤딩 (섹션의 제목 등) / 프레이징 / 임베디드 / 인터렉티브 (사용자와의 상호작용 등) ☆ HTML MDN에 기재되어 있는 문법을 보면 카테고리를 참고해서 볼 수 있음 ∂∇∂ 참고하기 좋은 사이트 : W3Cschools (https://www.w3schools.com/) ∂∇∂ 참고하기 좋은 사이트 : HTML MDN (https://developer.mozilla.org/ko/docs/Web/HTML/Element) - html entities ② block 과 inline - blcok : 사용자 화면에서 block은 한 문단을 모두 차지, 가질 수 있는 가로 크기를 전부 차지. - inline : 사용자..