MARK UP

head에 들어가는 태그(title, link, style, script) (#18)

title, link, style & script는 정말 많이 쓰고 html 문서를 만들 때 거의 무조건 사용됩니다 html문서의 대 제목 지구 모양 대신 다른 이미지도 사용가능합니다 아래 값에서 href 주소만 변경하면됩니다 절대경로, 상대경로 모두 가능합니다 *절대경로,상대경로 뜻 2020/11/10 - [개발은 처음이라] - image 태그(#10) link css 스타일시트에 첨부하는 태그입니다 link:css를 입력하면 자동으로 링크가 생성됩니다 폰트도 링크 태그에서 사용됩니다 https://spoqa.github.io/spoqa-han-sans/ko-KR/ Spoqa Han Sans Spoqa unveil the new version of Spoqa Han Sans, which has evol..

Form - select & option (#17)

셀렉트는 선택을 할 수 있게 하는 태그입니다 셀렉트는 기능을 만들 수 있게 해주고 옵션은 기능 태그입니다 1 2 3 4 5 서로 구분할 수 있게 value를 지정하여 값을 넣어줍니다 단, 서로 값만 다르면 됩니다 드라마 예능 로코 액션 스릴러 제출

Form - Lavel (#16)

라벨 라벨은 부가적인 태그이고 필수로 사용하지 않아도 됩니다 주로 박스에 이름을 달아줄 때 사용됩니다 즉. 폼 양식에 이름을 붙이는 태그라고 할 수 있습니다 라벨은 특정 인풋에 이름을 나타냅니다 어떤 인풋으로 연결되는지 반드시 써야합니다 라벨을 사용할 땐 반드시 "for"가 들어갑니다 라벨 여기서 누구에 들어가는 값은 라벨 라벨 내가 연결시키고자 하는 인풋ID값을 적어주면 됩니다 보통 ID값엔 #이 들어가는게 정상이지만 for에는 #을 적지 않습니다 ID에 적었던 값을 for에 적습니다 그러므로 input에 ID에 적은 값을 for에 넣어줍니다 여기서 코드를 적고 이름 부분을 클릭하면 박스가 활성화되면서 연결된 것을 알 수 있습니다 이름 회원가입 폼 관련 글은 2020/11/13 - [개발은 처음이라] ..

Form - input (#15)

minlength,maxlength는 내가 입력할 수 있는 자체 개수를 정한다면 min,max는 입력할 수 있는 최솟값을 입력할 수 있습니다 minlength,maxlength는 텍스트 개수라면 min,max는 숫자 값을 의미합니다 혹은 파일 형식이 .png 나 .jpg만 삽입 가능했으면 좋겠다라고 한다면 accept=".png, .jpg"를 사용합니다 임시로 만든 word 파일은 비활성화 되어있습니다 여기까지입니다 폼과 알려드린 속성,타입을 활용하여 회원가입 폼을 만들어보세요 많은 도움이 됩니다

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 ..