둥글게 둥글게

CSS 기본부터 적용하기 1) 간단한 box 만들기 → 부모-자식 box 만들어서 개발자 도구로 크기 확인해 보기 2) 글꼴 line-height 사용하기 → 사용하는 문장마다 글꼴을 각각 다르게 지정할 경우, 글의 크기를 같게 지정해도, 글의 높이가 달라질 수 있다. 따라서 line-height을 사용하여 글의 높낮이를 맞춰주자. ex) 미세하게 위-아래의 글꼴 높이가 2 정도 차이 남 (개발자 도구로 확인) ex) 두 문단의 글꼴 크기를 line-height을 이용하여 같게 함 (개발자 도구로 확인, 구분이 잘 되게 하기 위해 배경에 색을 줌) 3) 글 letter-spacing / word-spacing → word-spacing : 띄어쓰기 구분으로 한 단어마다 간격을 주는 것 (음수 가능) ex..

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) 간단하게 사용 - : 주소 사용할 때 (브라우저에 따라 기울임체로 화면이 보일 수 있음) - : 출처를 사용자 페이지에 보이게 할 때 사용 (큰 차이는 없지만, 브라우저에 따라 기울임체로 화면에 보일 수 있음) - : 역방향으로 글이 나오게 할 때 사용 - 와 : 는 특정 단어를 강조할 때 사용, 은..

이 글을 작성하는 오늘 나는 이제 막 학교를 졸업한 사회 초년생도 아니고, 직장인도 아니다. 대학교 전공은 컴퓨터공학을 나왔지만, 교수님의 추천으로 대학교를 졸업하기도 전에 첫 직장인 IT회사에서 경영관리부로 일을 하게 되었다. 회사에 입사해 3년간의 경력을 쌓고, 과감하게 퇴사를 했다. 경영 부서로 입사를 했어도 개발을 놓지 못해, 개발 부서 직원들 사이에 껴서 스터디 모임을 갖기도 하고, 자격증 시험에도 계속 도전했다. 3년이 지나서야 쌓아온 경력을 과감하게 내려놓고, 개발에 다시 도전하게 되었다. 대학생 때 동기들과 프로젝트를 진행하고, 졸업작품을 통해 개발을 진행했어도 3년이 지난 지금은 기억이 가물가물하다. 내가 가고자 하는 개발자의 방향을 어떻게 바로 잡을 수 있을까 고민을 하다가, 부트캠프를..