ALL

Form - input (#14)

1 사용자에게 인풋값. 어떤 정보라던가 데이터 필드를 생성할 때 쓰는 가장 기본 태그입니다 입력하는 공용 태그라고도 불립니다 type=" " 안에 반드시 적어줘야하는 내용이 있습니다 총 코드를 올려 드리겠습니다 같이 따라하셔도되고 포스팅만 보셔도 됩니다 Git에 코드 첨부하겠습니다 사용 방법을 알고 계신 분들은 코드만 가져오시고 잘 모르시는 분들은 영상을 참조해주세요 https://github.com/kimhaeryun/hearyun_blog input 값의 더 세세한 내용은 다음 포스팅에 올리도록 하겠습니다 2020/11/13 - [개발은 처음이라] - Form - input (#15) Form - input (#15) minjunkass.tistory.com code * { margin: 0; box..

Form - 1 (#13)

요즘엔 잘 안쓰기는 추세이긴 하지만 그래도 기초를 공부하고나서 좀 더 효과적인 방법을 택할 때 까지의 이해가 필요하니 포스팅 해보도록 하겠습니다 폼은 사용자로부터 정보나 데이터(input)을 받기 위한 태그입니다 폼을 사용할 땐 브라우저에게 정보를 알려줘야합니다 1 여기서 반드시 작성해줘야하는 내용이 있습니다 action="API 주소" methon="GET" , "POST" 사용자로부터 데이터를 받았다고 가정하고 "제출" 버튼을 눌렀는데 아무 반응이 일어나지 않는다면 action 값을 확인해야합니다 사용자로부터 Form을 작성하게 했다면 값을 가지고 처리해야하는 과정이 있습니다 즉, 서버 어딘가,누군가에게 값을 전달해줘야합니다 이떄 목적지 값을 명시해주는게 action 안에 들어갑니다 methon에서 ..

미디어 파일 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입니다 큰 제목임 작은 제..