본문 바로가기

WEB/HTML CSS JS

 (75)
[sass] @mixin @include 공통 코드 묶어서 사용하기 다양한 스타일을 지정할 때 중복되는 부분과 각각 고유 값을 설정 해야되는 부분이 있다. 예를 들어 .ul_list 와 .ol_list에 padding : 10px; margin : 10px;을 주고 각각 font-size : 2rem; font-size : 1rem; 준다고 가정 해보자. @mixin @include case 1 .ul_list{ padding : 10px; margin : 10px; font-size : 2rem; } .ol_list{ padding : 10px; margin : 10px; font-size : 1rem; } 가만히 보고 있으면 padding, margin 속성을 묶어주고 싶은 마음이 생길 것이다. 여기서 @mixin을 사용해 함수와 비슷하게 코드를 저장할 수있다. @f..
[Do it 반응형 웹 만들기] 들어가며 "단어를 많이 안다고 글을 잘 쓰는 건 아니다." 마찬가지로 html, css, js 문법을 안다고 웹 페이지를 만들 수 있는 건 아니다. 바로 지금 내가 그렇다. 뭔가 만들려고 하니 막막하고, 답답하다. 내 수준은 문장 조금 만들 줄 아는 수준 같은데 글을 쓰려고 하니 갈피를 못잡겠다. 그래서 준비했다. Do it 반응형 웹 만들기 http://www.yes24.com/Product/Goods/98491624 Do it! 반응형 웹 페이지 만들기 - YES24 개발자는 물론 기획자, 디자이너도 알아야 하는 반응형 웹의 필수 기술!실제 웹 페이지를 반응형 웹으로 변환하는 과정 대공개!서비스 기획, 웹 디자인, 개발까지 1인 3역을 해내는 저자가 가장 www.yes24.com 이전까지는 단어를 외우는데 주..
[sass] 미디어 쿼리 breakpoint 적용하기 예전엔 모니터에 맞게 웹 사이트를 만들어주면 되었지만, 요즘에는 스마트폰, 태블릿, 모니터, tv까지 다양한 미디어가 존재한다. 우리는 그중 스마트폰, 태블릿, 모니터 breakpoint를 만들 생각이다. breakpoint $breakpoint-mobile: 320px; $breakpoint-tablet: 768px; $breakpoint-desktop: 1024px; sass 변수를 만들어 준다. 픽셀값은 상황에 따라 변경하면 된다. 미디어 쿼리 @use "./variables.scss" as *; @mixin mobile { @media (min-width: #{$breakpoint-mobile}){ @content; } } @mixin tablet { @media (min-width: #{$bre..
[sass] 가변 그리드 맞게 박스 비율 계산하기 가변 그리드 그리드 자체가 크기가 변할 때 내가 설정한 px 단위 설정값들이 변하기전 비율을 유지할 수 있게 해주는 작업입니다. ex) 960px 가변 그리드에서 320px 너비 박스 비율을 유지하려면 어떻게 해야할까? * { margin: 0; padding: 0; box-sizing: border-box; } #wrap { width: 100%; height: 200px; border: 4px solid #000; div { display: inline-block; width: calc(320px/960px*100%); height: 50%; background-color: yellow; &:nth-child(2) { width: calc(320px/960px*100%); height: 50%; ba..
[sass] 0. visual code에서 sass(scss) 설정하는 방법 들어가며 일단 sass인지 사스인지 그것부터 공부해볼 생각이다. 구글링해서 글을 쓰윽 읽어보니 sass는 css를 보조해주는 언어고 전처리기가 따로 필요하다고 한다. 전처리기로 Dart sass, Ruby sass 같은 걸 사용한단다. 준비하기 그러나 나는 visual code를 사용하기 때문에 Sass, Live Sass Compiler 2개를 설치해줬다. 이거 2개만 설치해도 잘 작동하지만 css파일 저장 경로를 설정하기 위해 Live Sass Compiler setting을 변경했다. Ctrl + , 를 눌러 설정으로 들어간다. Formats과 Generat Map 이거 2개를 바꿀 생각이다. 간단하게 settings.json에서 편집을 눌러 savaPath를 바꿔주면 된다. { "security...
[책 후기] 2주 걸려 Do it 자바스크립트 + 제이쿼리 입문 책을 다 봤다. 들어가며 원래라면 22년까지 다 볼 생각이었는데, 결국 지나버렸다. 과거와 달리 HTML5, CSS3로 언어가 표준화된 상태고 javascript 또한 많이 발전했다. jquery는 코드가 짧고 편하지만, 결국엔 javascript로도 모두 만들 수 있는 것들이었다. 그리고 요즘에는 코드 길이도 크게 차이 없는 것 같다. 책을 읽으며 예제가 155개라고 적혀있는데 정말 예제가 많아 javascript 문법을 익히는데 충분했다. 이 책에선 DOM를 jquery로만 다루기 때문에 javascript DOM에 대한 갈증을 느꼈다. 반면 jquery에 대한 다양한 메서드 예제를 제공해 공부하는 데에는 부족함 없었다. 후반부에 나오는 jquery 플러그인부터는 훑어보는 정도로만 봤다. 왜냐하면 jquery 플러그..
7. jquery ajax method 아작스 메서드 jquery ajax method 메서드 설명 $("요소").load(url, data, function) 외부 콘텐츠를 가져옴 $.ajax() 여러가지 옵션에 맞는 외부 데이터를 불러옴 ajax 옵션 설명 url 전송 액션 페이지 news.php type 전송 방식 get, post data 전송할 데이터 dataType 요청 데이터 형식 html, xml, json, text, jsonp beforeSend 요청전 실행 함수 error 에러 발생시 함수 success 성공했을 때 함수 username HTTP 사용자 이름 데이터 가공 메서드 설명 $("요소").serialize() 쿼리 스트링 형식 데이터로 변환 후 반환 $("요소").serializeArray() 배열 객체로 변환해 반환 $.par..
6. jquery ajax 오토셋(autoset)으로 php, ajax로 도서관 정보나루 api 실습하기 AJAX(asychronous javascript and XML)는 비동기 방식으로 xml, json 파일을 불러오는 방법 입니다. ajax는 사용하기전 준비해야 할 것들이 조금 있습니다. 클라이언트와 서버 간 데이터 전송인 만큼 실습하기 위해서 서버가 필요합니다. 준비하기 autoset, visual code, 도서관 정보나루 api_key http://autoset.net/xe/download_autoset_10_7_2 오토셋 10.7.2 다운로드 AutoSet 유지보수 종료 안내 1. 오토셋에 대한 유지보수 계획이 없기에 사용자분들께 이 내용을 알려드립니다. 2. 현재 사이트를 통해 제공되는 버전이 최종 버전이며, 더 이상의 업그레이드가 없 autoset.net 앞으로 만들 파일들을 홈 디렉토리에 ..

티스토리툴바