Front-End/HTML5 파일 업로드 및 저장 - 01, html 개요 수작업으로 게시글처럼 보이도록 개행문자를 기준으로 나눠 태그를 작성하던 중 우연히 위그지그 를 발견하게 되어 관련 에디터 CKEditor의 이미지 업로드를 구현하기 위해 공부한 파일 업로드 부분을 정리하기 위해 작성하게 되었다. 위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다. 간단한 예제를 통해 어떻게 동작하는지 알아보도록 한다. html form enctype 속성(application/www-form-urlencoded) 작성자 파일 파일설명 enctype은 폼 데이터가 서버로 .. 2023. 9. 16. [HTML] 시맨틱 코드 작성 시맨틱한 코드 작성 1. table > tr > th [scope = " "] table태그의 th태그에 scope속성 사용으로 (scope = "row", scope = "col") row, col에 정보 정렬 기준 등으로 시맨틱한 정보를 전달 할 수 있다 2. a태그 target = "_blank" 일 때 안내하기 구글로 이동(새창에서) a 태그의 target속성으로 _blank를 사용하여 새로운 창을 생성하여 사용하면 텍스트 리더를 쓰는 분들은 새 창으로 전환된 것에 당황할 수 있기 때문에 (새창으로) 와 같이 안내문을 사용하는 것이 좋다. 3. img alt 사용 img 태그 사용 시 alt로 내용 설명 alt를 사용하지 않으면 스크린 리더는 src를 읽게됨 4. 이 또한 2번과 같이 텍스트 리더.. 2022. 10. 19. [HTML] 알면 좋은것들 이미지 비율 이미지의 width나 height 중 하나만 수정하면 이미지 비율을 유지하며 크기를 조정한다. 만약 둘 다 수정해 버리면 비율을 무시하게 된다. a 태그 이동 a태그는 원하는 웹페이지로 이동할 수 있고 id로도 이동할 수 있다. 두개 합쳐서 원하는 웹페이지의 id로도 이동이 가능하다. label과 input 연결 label태그의 for속성에 input태그의 id를 입력하면 label과 input이 연결되어 label만 클릭해도 input이 되도록 해준다. 라벨 textarea 공백 로 사용하게 되면 여는태그와 닫는 태그 사이에 줄바꿈(공백) 이 들어가게 되어 원하는대로 동작하지 않을 수 있다. colgroup colgroup을 이용하여 table의 column을 그룹지어 관리할 수 있다. 이.. 2022. 10. 18. [HTML] 메인 페이지 index.html의 이해 웹 페이지의 기본값 index.html은 웹 페이지의 메인 화면이다. 사이트를 요청할 때 다른 페이지가 지정되지 않은 경우 웹 사이트에 표시된 기본 페이지에 해당되는 가장 일반적인 이름 index.html은 산업 전반의 표준 필요 이유 웹사이트는 웹서버 디렉토리에 구축됨 보통 웹사이트 방문 시 url 주소만 치고 들어옴 특정한 페이지를 요구하지 않았기 때문에 어떤 페이지를 보여줄지 모르는 문제 발생 이를 해결하기 위해 특정 이름의 페이지를 기본 페이지로 사용 사용자는 특정 페이지를 요구하지 않았기 때문에 기본 페이지로 이동함 이 기본 페이지에 사용되는 이름이 index.html임 예외 사항 index.html 외에도 일부 사이트에선 default.html homt.html 등도 사용함 장점 : 모든 디렉.. 2022. 10. 17. [HTML] 시맨틱 태그 시맨틱 태그 의미가 있는 태그 의미가 없는 태그는 이름만 보고 무슨 내용, 역할인지 유추 할 수 없다. 의미가 있다면 태그만 보고도 브라우저, 개발자가 내용, 역할을 유추 가능하다. 장점 검색엔진 최적화(SEO) 검색엔진은 봇을 이용해 웹사이트 정보를 수집하고 검색할만한 키워드를 예상하여 인덱스를 만든다. 이러한 인덱스 생성에 사용되는 정보는 HTML코드, 그 중 시맨틱 태그들을 해석해서 구성합니다. 시맨틱 태그를 잘 썻다면 검색엔진이 의도한대로 잘 동작함 가독성 향상 코드를 보고 어느 부분이 어떤 역할을 하는지 한 눈에 파악이 가능 여러 사람이 작업할 때 따로 설명을 하지 않아도 파악이 가능 유지보수에 도움 strong em mark sub sup header nav section article asi.. 2022. 10. 17. 이전 1 다음
