IT기술/html40 [HTML] 파일 전송 방법 이해 HTML로 파일을 전송하려면 파일 업로드 기능을 이용해야 합니다. 여기서 전송이란 브라우저에서 다른 서버나 다른 클라이언트로 파일을 보내는 것을 의미합니다. 그러려면 파일을 웹 브라우저를 통해 보내야 합니다. 대표적인 방법으로 form 태그를 이용한 방법이 있겠습니다. 여기서 파일이란 이미지, 음악, 문서 같은 실제 파일을 의미하며 이름, 내용 같은 문자가 아닙니다. 파일을 전송하려면 바이너리 데이터로 변환 후 전송해야 하는데, 이때 HTTP 메시지 헤더를 보면 차이가 있습니다. 일반적인 문자 데이터 전송 Content-Type : application/x-www-form-urlencoded 파일 전송 Content-Type : multipart/form-data multipart/form-data 형식.. 2024. 2. 22. HTTP header Content-Type 정리 http 통신으로 사용하는데 HTTP 헤더로 주로 사용되는 Content-Type을 한번 정리해보려 합니다. content-type이란 표현하는 자원의 종류를 명시적으로 선언하여 보내기 위해 사용되며, 명시된 것과 일치하지 않을경우 에러가 나기도 합니다. 이 값은 표준 mime-type중의 하나입니다. Content-Type 1) Multipart Related MIME 타입 - Content-Type: Multipart/related 2024. 2. 12. API(application programming interface) 가 무엇인가? 알고 사용하자 API(application programming interface)는 컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 일종의 소프트웨어 인터페이스이며 다른 종류의 소프트웨어에 서비스를 제공한다. 이러한 연결이나 인터페이스를 빌드하거나 사용하는 방법을 기술하는 문서나 표준은 API 규격(사양)으로 부른다. 컴퓨터와 인간을 연결시키는 사용자 인터페이스(User Interface)와 반대로, API는 컴퓨터나 소프트웨어를 서로 연결한다. 즉, 소프트웨어 끼리 데이터를 주고 받는데 있어 각 소프트웨어가 제공하거나 받는데 사용되는 것을 API라고 이야기한다. API의 한 가지 목적은 시스템이 동작하는 방식에 관한 내부의 세세한 부분을 숨기는 것으로, 내부의 세세한 부분이 나중에 변경되더라도 프로그래머가 유용하게 사용.. 2023. 6. 30. [css] div정렬 및 겹치기 position:absolute ,position:relative position의 속성으로 absolute와 relative가 있다. 이들은 주로 div로 프레임을 짤때 배치를 선택하는데 사용된다. absolute는 절대 위치를 표현하므로 브라우저의 좌측 상단을 기준으로 개체가 놓이게 한다. relative는 상대 위치를 표현하므로 특정 개체를 기준으로 위치가 잡힌다. 예제로 비교해 보면 쉽다. absolute소스확인 1 2 3 4 5 6 7 8 9 10 11 12 13 14 relative 소스확인 1 2 3 4 5 6 7 8 9 10 11 12 13 14 정리해보면 absolute는 특정 개체와 관계없이 겹쳐서라도 배치가 되는 수준이며 relative는 각 개체를 기준으로 상대적 위치에 배치되므로 겹치지 않는다. 2018. 10. 30. [css] 선택자(Selector) CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문이다. 특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못한다. 선택자(Selector)의 종류 선택자(Selector)는 아래와 같이 4개로 구분된다. 공통 선택자(Universal Selector) 타입 선택자(Type Selector) ID 선택자(ID Selector) Class 선택자(Class Selector) - 공통 선택자(Universal Selector) 공통 선택자(Universal Selector)는 *로 표현되는 선택자이다. * { color: gray; .. 2018. 10. 30. [CSS] 텍스트 줄바꿈 처리 word-break, white-space 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. 1 .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면.. 2018. 10. 28. [css] html 모서리 둥글게 하기 / div 모서리 둥글게 하기 / border-radius Cascading Style Sheets 통칭 css에서 div로 이루어진 사각형 또는 이미지의 모서리를 둥글게 하고 싶은 경우가 있다. 그럴땐 어떻게 하느냐?? 생각보다 어렵지 않다. 사각형을 가지고 직접 예를 들어보자. 아래의 사각형은 div로 이루어진 것이다. width:300px; height:120px; border:2px solid #000000;" 여기서 border의 radius 속성을 이용하면 사각형의 모서리가 둥글게 된다. 얼마나 둥글게 되냐면 아래의 그림과 같다. border-radius:20px; 일 경우 반지름이 20px인 만큼 테두리가 둥글게 되는 것이다. border-radius 를 적용하면 아래처럼 된다. width:300px; height:120px; border:2px s.. 2018. 10. 28. 인터넷 익스플로러(Internet Explorer 11) 인증서 오류 해결하는 방법 인터넷 익스플로러(Internet Explorer 11) 인증서 오류 해결하는 방법환경: Internet Explorer 11익스플로러를 사용하다 보면 인증서 오류가 발생할 때가 있다.대부분 인증서 오류는 웹사이트 측의 유효 기간이 지나서 발생하는 것인데, 보통 자신의 컴퓨터에 시간 오류가 있는 경우 발생한다. 인터넷 익스플로러 인증서 오류가 날 때 해결 방법 ▼ 먼저 문제 해결을 하기 전에 컴퓨터 시간을 점검해본다.만약 컴퓨터 시간이 현재 시간과 차이가 있다면 동기화를 통해 서버 시간과 맞춰야 한다다. 혹시 이방법으로 해결이 된다면 다행이지만 안된다면 인터넷 옵션에서 설정을 변경해줘야 한다. 이렇게 설정이 끝난 후 다시 웹 페이지를 재시작 하면 수정 끝 인증서 오류 해결하는 방법 2018. 10. 28. [css] CSS를 이용한 마우스 커서 모양 지정 cursor 속성을 이용하면 마우스 커서의 형태를 지정할 수 있습니다. 아주 간단하므로 예제를 보시면 금방 이해가 됩니다. Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help아래 예제에서 글자위에 마우스를 올리면 모양이 변합니다. AutoCrosshairDefaultPointerMovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp 2018. 10. 28. parent가 http이고 child가 https일 때 발생하는 현상들 이 글에서: parent: 탑(혹은 메인) 프레임, body 내에 iframe을 갖는 페이지를 뜻한다. child: parent의 body 내에 있는 iframe을 뜻한다 child나 parent에서 서로의 자바스크립트 객체나 DOM 객체에 접근 불가 동일 출처 정책 위반으로 브라우저가 차단함. parent와 child간 상호작용은 거의 불가능하다고 봐야 한다. 1 2 3 4 5 // 교차 출처인 윈도우의 프로퍼티(변수, 함수, 브라우저 객체 등)에 접근 불가 window.frames[0].history; // SecurityError: Permission denied to access on cross-origin object window.frames[0].foo; // SecurityError: Per.. 2018. 10. 7. input name 차이 구분하기 위 태그는 XHTML 1.0 Strict 유효성을 통과한다. name이나 id 속성을 넣어줄 필요가 없다. 그러면 name이나 id는 왜 쓰는걸까?? 이는 특정 요소에 스타일이나 동적 변화에 대한 대상이 되게 하려고 쓰는 것이다. 또한 페이지 전환 시 데이터 전송을 위해서도 쓰인다. 그런데 name 이나 id는 보통 같은값으로 하는 경우가 많다. 두 속성이 같은 기능을 하는것은 아닌데, 왜 그러는 걸까?? 그럴려면 name과 id의 기능을 먼저 알아야 한다. name - image, div, table 등 다양한 요소에 사용 가능 - form 태그를 이용하여 다른 페이지로 값을 전달할 때 사용 - checkbox의 값을 전달할 때 배열로 전달시킴 - 자바스크립트의 getElementsByName을 활용할.. 2018. 10. 7. [css] radio, checkbox 이미지 바꾸기 2 폼입력 컨트롤중 하나인 라디오버튼(radio)과 체크박스(checkbox)를 CSS의 선택자와 백그라운드 속성을 이용하여 디자인을 입히는 방법을 찾아 변경하는 방법을 정리해본다. HTML에서 다음과 같이 label을 이용하면 된다. ㄹㄹㄹㄹ 1 2 3 4 남자 CSS의 경우 HTML과 달리 기존과 달리 추가해주어야 하는 곳이 많다. IE에서는 적용되지 않게 하기위한 :not 선택자, 라디오버튼(radio)과 체크박스(checkbox) 비활성화와 체크여부를 알기위한 :disabled, :checked 선택자등 CSS3에서 추가된 가상선택자등이 사용되었다. 1 p>input[type="checkbox"], p>input[type="radio"] { position:relative; top:-1px; vert.. 2018. 10. 7. 이전 1 2 3 4 다음
