MARK UP

image 태그(#10)

이미지 태그 형식입니다 1 src = source alt = alternative text 이미지 파일을 브라우저에게 전달 해줘야 할 때 src="" 내에서 전달 해줍니다 alt는 대체 텍스트라는 뜻을 가집니다 이미지의 대안을 나타냅니다 사과를 물고 있는 강아지 사진 이미지 값을 src="" 내에 저장 하였을 때 alt=""에 "사과를 물고 있는 강아지" 라고 표기하면 네트워크가 느리거나, 특정 상황에 이미지 대신 보여주게 됩니다 우리는 이미지가 보이지 않는 환경을 가지고 있는 사용자를 위해 이미지에 대한 최소한의 정보를 제공할 의무가 있다고 합니다 이 때 사용하는 것이 alt 속성입니다 *시각 장애인을 위해 구글을 비롯한 여러 사이트에서는 이미지 클릭 시 alt 속성에 넣어놓은 텍스트 내용을 음성으로 ..

링크 Anchor(#9)

링크는 반드시 명시 해줘야 할 속성이 있습니다 href는 태그의 추가적인 정보를 주는 속성입니다 hypertext reference 라는 뜻을 가지며, reference는 주소값이라는 을 가지기도 합니다 1 텍스트 폴더 내에서 경로 이동도 가능하며, 외부 주소로도 이동이 가능합니다 1 텍스트 1 텍스트

semantic 태그 | non-semantic 태그(#8)

시맨틱(Semantic)은 "의미론적인" 이라는 뜻을 가지고 있습니다 즉 시맨틱 태그란, "의미론적인 태그"라고 할 수 있습니다 시맨틱 태그는 각자 기능과 의미에 맞게 작성할 수 있도록 하는 태그입니다 흔히 , , 등 태그가 있죠 태그는 유저를 위한 정보가 아닌 웹 브라우저를 위한 정보라고 말씀드린 적이 있었죠 이 태그는 그런 의미로 사용이 되고, 태그 라는게 있습니다 이 태그는 아무런 의미가 없습니다 뭔가 지칭하지도 않습니다 이라는 태그도 있습니다 이 태그도 와 마찬가지로 non-semantic 태그입니다 즉, div는 컨테이너,박스 같은 느낌으로 생각하면 됩니다 그 안에 내용물을 넣는것이죠 텍스트를 위한 컨테이너는 span 태그를 사용하면 됩니다 간단히 정리하겠습니다 semantic 태그는 제목, 문..

HTML -3(#7)

오늘은 meta 태그에 대해 배워 볼 예정입니다 meta 태그는 head에 들어가며 유저를 위한 정보가 아닌 브라우저에 대한 정보를 위해 사용하는 태그입니다 메타 태그는 heml 문서가 어떤 내용을 담고 있고, 그 문서의 핵심 키워드는 무엇이며, 누가 만들었는지 등 정보를 담고 있습니다 또한 메타 태그는 열었다 닫는 구조가 아닌 태그입니다 지금 보여드릴 태그는 charset(Character encoding)입니다 전에 썻던 코드에 이어서 써봅시다 큰 제목임 작은 제목임 head사이에 코드가 생겼습니다 이 코드의 뜻은 UTF-8방식의 encoding으로 해당 문서를 작성한다 라는 뜻을 가지게 됩니다 즉, 브라우저에게 어떤 언어로 작성되었는지 알려줍니다 다음은 description입니다 큰 제목임 작은 제..

HTML -2(#6)

태그를 작성 후 저장 버튼을 꼭 눌러주셔야합니다 windows: 컨트롤 + S mac: command + S 이제 제대로된 html 문서를 작성하는 방법을 배울거에요 전에 썻던 태그들은 이해하기 쉽게 쓰였고 실제로는 사용하지 않습니다 (title, p, href 태그 제외) 사용했던 index,html에서 기존 내용들은 모두 지우거나 주석처리를 해줍시다 주석처리는 입니다 주석처리 관련해선 따로 다룰 예정이니 일단 넘어갑시다 이 태그는 구글 크롬으로 하여금 html 문서임을 알려줍니다 이 태그는 이렇게 한 줄로 끝입니다 태그는 열었으면 꼭 다시 닫아주어야합니다 하지만 왜 닫지 않을까요? 그건 바로 " self-contained 태그 "라고합니다 혼자 스스로 열고 닫는 태그이고, 이 태그는 그 자체로 정보를..

HTML -1(#5)

웹사이트에서 각각 요소가 무엇을 뜻하고 알려주는 언어가 HTML입니다 HTML은 대게 Tag를 사용합니다 즉 Tag로 이루어진 텍스트 문서라고 할 수 있습니다 이론은 재미없으니 실전을 통해서 바로 확인해봅시다 #4에 github desktop에서 만들었던 폴더가 있을 겁니다 필자는 TEST로 지정하였습니다 vscode에서 해당 폴더를 켜시고 폴더에 제목 이름 "index.html"를 작성해주세요 index를 쓴 이유는 웹 서버들이 index 파일을 제일 먼저 찾도록 디폴트 값으로 설정되어 있기때문입니다 이제 태그를 작성할 것입니다 *당부하지만 아래처럼 사용하는 태그는 실제로 없습니다 이해를 돕기위해 만들어낸 태그입니다* 태그는 보통 이렇게 생겼어요 내용 고기는 역시 소고기 태그가 있고 그 가운데에 들어가..

HTML + CSS(#2)

HTML이란 웹페이지를 만들기 위한 마크업 언어이며, 웹 브라우저에서 동작합니다 HyperText Markup Language 간혹 사람들이 헷갈려 하는 부분이 있습니다 "어쨋든 HTML도 언어인데 프로그래밍 언어가 아니에요?" HTML에서 M은 Mark-up를 정의하며 이 뜻은 예를 들어 책을 읽고 있는데 이 부분은 중요하다! 하고 밑줄을 긋는 것 같은 행위입니다 우리는 코드를 작성합니다 우리가 알아보기 위함이 아닌, 웹 브라우저가 알아들을 수 있는 대화입니다 웹 페이지를 제작할 때 타이틀 달고, 제목을 짓고, 링크도 넣으면서 연결시켜주는 것이 html입니다 즉 각각 무엇인지 알려주는 언어라고 할 수 있습니다 조금 더 쉽게 설명해보겠습니다 아래 네이버 메인 사이트입니다 최상단에 탭 부분에 NAVER가 ..