오물오물 개발일기

* Form Tag 사용자로부터 데이터를 받기위해 사용하는 태그 사용자에게 input을 받으면 무언가 처리를 해줘서 결과값을 보여줘야 한다. action의 경우 입력받은 input을 처리 하기 위한 주소를 작성하며 모를경우엔 #을 기재하고 backend개발자와 논의한다.

💡 웹 정보의 중요성 위와 같이 똑같은 결과물을 위해 다른 방법들이 있습니다. 가 아닌 css로 시각적으로 표현 할 수 있지만 웹페이지에서 내포한 의미는 상이합니다. 단순 시각적 표현으로 만든것은 검색엔진에서도 보여주는것이 다릅니다. 이유를 알기위해 아래에서 웹표준과 웹접근성에대하여 알아봅시다. 1. 🤷‍♂️ 웹표준이란 ? 웹에서의 표준은 W3C의 토론을 해 나온 권고안을 말한다. 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 한다. 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미합니다. 권고안을 지켜 웹사이트를 제작하는것을 "웹표준을 지켰다"라고 말할 수 있습니다. 1-2. 👀 웹표준 조건 W3C 권장 표준 DTD..

* blockquote 문단전체가 인용구 일때 사용합니다. 형식의 cite attribute를 사용하여 URL을 기재한다. 태그를 이용하여 텍스트 형식의 출처를 남긴다. 노래로 알아봅시다 난 그대 없인 살 수 없어 왜 자꾸 나를 두고 멀리 가 가난한 내 마음을 가득히 채워 줘 눈 깜짝하면 사라지지만 스쳐 가지만 잊을 수 없는 이 맛 메마른 내 통장에 단비 같은 너 언제쯤에야 자유로울 수 있나 무한한 이 속박으로부터 난 매일 손꼽아 기다려 한달에 한번 그댈 보는 날 가난한 내 마음을 가득히 채워 줘 눈 깜짝하면 사라지지만 난 그대 없인 살 수 없어 왜 자꾸 나를 두고 멀리 가 가난한 내 마음을 가득히 채워 줘 눈 깜짝하면 사라지지만 - 스텔라장(Stella Jang), 월급은 통장을 스칠뿐 * q 문단안에..

* div & span - 두 태그의 경우 Semantic Markup 적으로 즉, "의미론적"으로 지니고 있는건 없다. 우리가 실생활에서 정리를 할때 물건을 박스에 담듯이 css 작업을하며 레이아웃을 잡거나 정렬을 시킬때 사용하기도 하며 부분적으로 색변경, 폰트사이즈변경 등의 작업할때 사용한다. * 영역 설정 div는 정해져있는 영역 전체를 감싸게된다. span은 줄단위로 영역을 감싸게 되며 범위가 다르다. div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자 div와 span의 차이점을 알아보자..

* Description List dl (description list) : 정의, 설명 목록 명시 dt (description term) : 정의할 용어의 추상적인 개념 (key) dd (description descriptions) : 정의할 용어의 구체적 내용 (value) dl태그의 자식 요소에는 div, dt, dd 등이 올 수 있다. skills HTML CSS JS Firefox Naver Whale Chrome internet browser Name Godzilla Born 1952 Birthplace Japan Color Green * dfn 문단에서 용어를 정의할 경우 사용하게된다. 웹 개발자는 프론트엔드, 백엔드 등으로 나뉠 수 있습니다. HTML is the standard mark..

* ol (ordered list) 리스트의 순서에 의미가 있는경우 Ordered List HTML CSS JS * ul (unordered list) 리스트의 순서에 의미가 없는경우 Unordered List HTML CSS JS * ul이나 ol의 자식위치에는 li만 가능하다.

* Emphasis (강조) 강조 : 기울이며 강조 강조 : 볼드감을 주며 강조 css로 수정이 가능하나 중요한건 브라우저에게 어느 부분이 중요하다는것을 알려준다는것 한강 야경은 꼭 내 모습 같다. 속은 썩어있지만 겉은 좋아보이는게. 나만 이렇게 사는걸까? 한강 야경은 꼭 내 모습 같다. 속은 썩어있지만 겉은 좋아보이는게. 나만 이렇게 사는걸까?

* Headings & Paragraph h1, h2, h3, h4, h5, h6 : 제목 & 타이틀에 해당하는 부분 p : 문단 구분 고양이 특징 머리가 둥글고 얼굴은 짧고 넓으며, 눈이 둥글고 커서 양안시(양쪽 눈의 망막에 맺힌 대상물을 각각이 아닌 하나로 보게 하고, 입체적으로 보게 하는 눈의 기능)의 능력이 뛰어나다. 귓바퀴는 작은 삼각형 모양으로 끝에 긴 털이 있으며 몸에는 다양한 무늬가 있다. 몸길이는 보통 30~60cm이며 몸무게는 2~3kg부터 7.5~8.5kg에 이르기까지 다양하다. 꼬리는 종류에 따라 길이가 다르며 보통은 22~38cm 정도이다. 발가락은 앞다리에 5개, 뒷다리에 4개가 있으며 발톱을 살 속에 감출 수 있다. 야생의 고양이가 길들여져 가축화되었으며, 야생 고양이는 산림 ..

* 줄바꿈 vs html 작업시 줄바꿈을 위한 태그 중 사용 가능한 태그는 두가지가 있다. , 은 시각적으로 줄바꿈이라는 의미만 있을뿐 html 개발자들은 paragraph tag로 를 사용하길 권장한다. 위와 같이 똑같은 시각적 효과를 볼 수 있지만 tag 를 사용하는것이 좋다. 웹 페이지에서 ~ 로 감싸는것이 '단락' 이라는 정보를 내포하고있다.

* 웹 정보의 중요성 tag 가 아닌 css 로 시각적으로 표현 할 수 있지만 웹페이지에서 내포한 의미는 상이하다. 제목이 tag인 경우와 단순 시각적표현으로 만든것은 검색엔진에서도 보여주는것이 다르다. 경우에 따라서는 포토샵과 일러스트를 사용한 글을 작성하는 경우도 있으나 지양해야한다. * HTML Semantic : 의미구조에 맞게 작성한다. SEO (Search Engine Optimization) : 검색 엔진 최적화를 위한 알맞은 태그를 사용한다. : DTD(Document Type Declaration)선언을 시작으로 작성해간다. 웹 문서에 들어갈 내용 * 현대 사회에서는 검색엔진이 가지고 있는 위상이 정말 높기때문에 검색엔진에 노출 되지않는다는것은 실제로 존재하지 않는다는것과 같다. 웹의 핵..