본문 바로가기

분류 전체보기

 (42)
HTTP(Hypertext Transport Protocol) HTTP 프로토콜은 Hypertext Transport Protocol의 약자로, 웹 문서(HTML,CSS, JS)를 전송할 때 사용하는 규약이다.클라이언트는 일반적으로 사용하는 웹 브라우저를 뜻한다 (IE, Chrome, Firefox 등) GET / HTTP/1.1Host: gompangs.tistory.comUser-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: ko-KR , ko;q=0.8 , en-US;q=0.5 , en;q=0.3Accept-En..
VCS(Version Control System) 란 ? VCS(Version Control System) - 버전관리 시스템 (형상관리, 소스관리라고 다양한 용어로 사용) 한마디로 말하자면 내가 작업한 코드들을 저장해놓기 위한 공간 이라고 생각하면 된다.대신 커뮤니케이션이 잘 안되어 협업이 잘 안되면 본인이 작성한 코드가 날아가는 경우가 생길 수도 있다. 기존의 SVN에서는 commit을 할 때마다 계속적으로 서버와 연결하고 데이터 송수신을 해야 했던 반면에, Git은 본인 컴퓨터에 내부 저장소를 만들고, 거기에 저장을 해놓았다가 나중에 서버로 Push하는 방식이다. 그렇기 때문에 실시간으로 저장하고 처리하는 환경에서 Git이 SVN보다 빨리 동작할 수 있는 원인이다. SVN - 하나의 서버에 여러 클라이언트가 연결되어 있는 구조 GIT - 클라이언트 개인별..
[ Codepen ] 코드펜 사용법 https://codepen.io/ 코드팬은 주로 자바스크립트/css/html을 테스트 할 때 사용합니다.로그인은 github 계정이 있다면 그걸로 연동해서 로그인 할 수 있습니다. 1. Create 버튼 Pen 클릭 그럼 위 화면같이 나온다. 저 연필을 클릭하면 이름을 바꿀 수도 있다. 2. 화면 우측에 HTML/CSS/JS 부분에 소스를 넣으면 된다.저장 : 컨트롤+s3. Setting 환경설정 하는 방법 html/css/js를 설정하는데 제이쿼리 라이브러리나 SCSS등을 설정 할 수 있습니다.위 사진과 같이 CSS를 SCSS로 설정js도 변경가능 YOUR Dashboard 내가 만든 pen리스트를 볼 수 있습니다. Search - 돋보기 이모티콘내가 예시를 보고싶어하는것을 검색해보시면 됩니다. (되..
HTML 반응 형 웹 디자인 [뷰포트 설정&반응형 이미지] 반응 형 웹 디자인이란 무엇입니까?반응 형 웹 디자인을 사용하면 웹 페이지를 모든 장치 (데스크톱, 태블릿, 휴대 전화)에서 잘 보이게 할 수 있습니다.반응 형 웹 디자인은 HTML 및 CSS를 사용하여 화면의 모양이 잘 보이도록 내용의 크기를 조정, 숨기기, 축소, 확대 또는 이동하는 방법입니다. 뷰포트 설정하기반응 형 웹 페이지를 만들 때 모든 웹 페이지에 다음 요소를 추가 뷰포트 메타 태그가없는 경우 : 뷰포트 메타 태그 사용 : 반응 형 이미지반응 형 이미지는 모든 브라우저 크기에 맞게 확장되는 이미지입니다.width 속성 사용width 속성을 100 %로 설정하면 이미지가 반응하고 크기가 조정됩니다. max-width 속성 사용max-width 속성을 100 %로 설정하면 원본 크기보다 커야하지..
HTML 레이아웃 요소 [마크업] HTML 레이아웃 요소 웹 사이트는 종종 잡지나 신문과 같이 여러 열에 내용을 표시합니다.HTML5는 웹 페이지의 다른 부분을 정의하는 새로운 의미 요소를 제공합니다. - 문서 또는 섹션의 머리글을 정의합니다. - 탐색 링크 용 컨테이너를 정의합니다. - 문서의 섹션을 정의합니다. - 독립적 인 독립 기사 정의 - 사이드 바처럼 콘텐츠를 제외하고 콘텐츠를 정의합니다. - 문서 또는 섹션에 대한 바닥 글을 정의합니다. - 추가 세부 정보 정의 - 요소의 제목을 정의합니다.
아코디언 리스트 부분 손쉬운 코딩 이렇게 구조 만드려면 ▲ html 코딩입니다. li안에 div 생성 가능. 그리고 기능을 넣어주려면 button 속성을 써야한다. 위치는 큰 타이틀 기준으로 position:relative를 하고 상하좌우 가운데 정렬을 하려면 position:absolute와 top:50%와 콘텐츠 내용물의 크기 기준으로 나누기 2하면됨 그게 -8임. 그리고 width (100/1000*100%); 는 100px을 전체 wrap=1000 나누고 * 100% 해주면된다.
4. CSS의 기반 SASS 기본 정의 (Mixin) Mixin 정의하기Mixin은 다음과 같은 형식으로 정의합니다.@mixin mixin-name { // code }인자를 포함하여 다음과 같이 정의할 수도 있습니다.@mixin mixin-name( $arg1, $arg2, ... ) { // code }Mixin 사용하기Mixin을 사용할 때는 다음과 같이 합니다.@include mixin-name;인자가 있는 mixin이라면 다음과 같이 합니다.@include mixin-name( value1, value2, ... ); =================================== 가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다. SASS@mixin jb { p { color: red; } } @include jb;CSSp ..
3. CSS의 기반 SASS 기본 정의 (변수) 변수 inc.scss$jb-color: red;SASS@import "inc.scss"; h1 { color: $jb-color; }CSSh1 { color: red; }

티스토리툴바