전체 글

미디어 파일 Midia import(#12)

미디어 파일이란 html 문서 안에 텍스트가 아닌 어떤 형테의 데이터를 집어넣는 경우를 미디어 파일이라고합니다 이미지 태그도 그림에 해당되므로 미디어 파일에 해당됩니다 오디오 파일을 넣을 때 사용하는 태그입니다 비디오 태그도 마찬가지입니다 를 사용합니다 1 오디오 폴더를 생성 후 안에 audios, videos 폴더를 생성해봅시다 audio 폴더 내에는 mp3, ogg, wav를 넣고 videos에는 mp4, mov를 넣어봅시다 아래 처럼 넣게 되면 아무것도 나오지 않으므로 오른쪽에 controls 속성을 추가합니다 1 오디오 1 오디오 페이지에 들어가자마자 노래 재생을 하고 싶다면 autoplay를 추가합니다 *현재 최신 크롬 브라우저 기준으로 무분별한 광고로인해 autoplay 기능은 막혀있습니다 해..

목록 List(#11)

html 에서 목록을 표현하고 싶을 때 list를 사용합니다 list에는 ul, ol 가 있고 자식요소인 li가 존재합니다 ul 은 단순히 나열하는 곳에 사용합니다 ol 은 태그는 실시간 검색어, 요리 레시피 등 순서가 중요한 곳에 사용합니다 그리고 그 안에 항목을 나열할 땐 li 태그를 사용합니다 ul과 ol의 자식요소는 되도록이면 li 태그만 사용하도록 합시다 div 태그라던지, a 태그 같은 것은 표준법에 어긋납니다 꿀팁을 드리자면 li 태그를 5개 일일이 만들 필요 없이 li*5 하게되면 5개의 li 클래스가 생성됩니다 li 내용 옆 점은 신경 쓰지 않아도됩니다 브라우저에서 제공하는 나름의 스타일이라고 보면 됩니다 css로 간단히 없앨 수 있으니 이 내용은 나중에 쓰도록 하겠습니다 1 2 3 4 ..

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 파일을 제일 먼저 찾도록 디폴트 값으로 설정되어 있기때문입니다 이제 태그를 작성할 것입니다 *당부하지만 아래처럼 사용하는 태그는 실제로 없습니다 이해를 돕기위해 만들어낸 태그입니다* 태그는 보통 이렇게 생겼어요 내용 고기는 역시 소고기 태그가 있고 그 가운데에 들어가..