본문 바로가기
728x90

전체 글156

[CSS] box-sizing border-box content-box CSS 박스 사이즈 관련 속성 box-sizing CSS에서 박스의 크기를 지정하였는데도 원하는 크기로 안바뀌는 경우에는 css의 box-sizing 속성을 확인해볼 필요가 있다. CSS Selector { box-sizing : content-box; (기본값) box-sizing : border-box; } box-sizing 속성을 content-box로 하면, 설정해놓은 사이즈는 padding, border 속성의 사이즈를 제외한 박스 자체의 사이즈로 설정이 된다. 즉, width 와 height 를 100px로 설정해 놓아도, border : 5px; padding : 5px 으로 설정하게 되면, width 는 120px이 되는 것이다. padding, border 의 설정 사이즈를 포함하여 원.. 2021. 3. 4.
[CSS] BEM (Block Element Modifier) 표기법 코드는 가독성이 중요하다. 하지만 코드양이 많아지면 그만큼 클래스명도 다양해지고 구조 또한 복잡해진다. 그래서 클래스 명의 명확성과 일관성, 의미론을 유지할수 있는 CSS 표준에는 BEM 표기법이 있다. BEM 은 Block Element Modifier 의 약자이다. 클래스 이름 안에 언더바 두개씩 있고, 마이너스 표시가 그 뒤에 두개씩 있는 경우를 접해본적이 있다면, 그게 BEM 을 활용한 클래스의 표기이다. 예시) main__item--blue 하지만 간혹 보면 BEM 표기법을 아이디에 사용하는 경우도 종종 있는데, 이는 잘못된 방법으로, 클래스에만 사용하여야 한다. 하단의 간단한 예제를 통해 BEM 의 의미를 이해하도록 하자 샘플 예제 Html 설명 Block : Element : Modifier.. 2021. 3. 4.
[Javascript] 버튼 클릭시 원하는 링크 이동 자바스크립트(Javascript) 링크 이동 window.location = '원하는 링크주소'; a태그의 속성 href 값에 링크 주소를 설정해 놓으면, 클릭시 해당 링크로 이동한다. Button 태그에서 원하는 링크로 이동하는 방법 티스토리 2021. 3. 3.
애플 맥북 M1 초기화 방법 및 발생오류!! 애플의 맥북 intel 칩과 M1 칩의 탑재 여부에 따라 복구모드 진입 방법이 다르다. Intel 칩 기반 맥북 공장 초기화 방법 1. Mac을 킨다. 2. command(⌘) + R 키를 길게 누른다. 3. 복구 유틸리티 > 디스크 유틸리티 > Macintosh HD 드라이브 지우기 4. Mac Os 설치하기 (Macintosh HD 선택) M1 칩 기반 맥북 공장 초기화 방법 1. 맥을 키면서 전원버튼을 길게 누른다. 2. 애플마크 하단에 Continue holding for startup options라는 문구가 Loading stratup options...로 바뀌면 전원버튼에서 손을 띤다. 3. 옵션 윈도우로 화면이 바뀌면 옵션윈도우를 클릭 4. 복구 유틸리티 > 디스크 유틸리티 > Macint.. 2021. 3. 3.
[Javascript] fetch API Javascript Web에서 리소스의 비동기 처리 - fetch API fetch는 promise 기반으로 비동기 네트워크 통신을 알기쉽게 기술하는 방법이다. fetch로부터 반환되는 promise객체는 Error발생시 reject하지않고, resolve를 통해 전달된 response내의 .status를 통하여 네트워크 상태를 진단할수 있다. (ex 200 성공 404 실패 데이터없음 등.) fetch('경로 또는 url') .then(response => response.json() or response.text()) .then(data => console.log(data)); 2021. 2. 25.
[프론트엔드] 쇼핑몰 상품 정렬 코드샘플 (Html,Javascript,Css) Sample Code 쇼핑몰 상품 정렬 코드 샘플 HTML5 , Vanilla Javascript, Css3 1. 설명 : 온라인 쇼핑몰에서 흔히 볼수있는 상품 정렬 코드 샘플이다 2. 사용언어 : Javascript, Html, Css [플러그인 사용 x] 3. 구동 로직 - 상품 Sample 이 없어서 짱구는 못말려 케릭터로 대체 (1) fetch API 를 통해 서버측의 json 데이터 Get (2) json파일(상품 객체 리스트) 저장 (3) 해당 리스트 출력 (4) 이후 선택 옵션에 따른 filter 처리 후 출력 [샘플 코드 :Html] 짱구 철수 유리 훈이 [샘플코드 :Css] :root{ /* color */ --color-white : #f4f9f9; --color-black : #0d335d; --color.. 2021. 2. 24.
[Javascript] 배열 요소 검색 array.find() 자바스크립트 배열 요소 검색 array.find() array.find(CallbackFunction) 배열 내 요소 검색의 방법에는 여러가지가 있지만, 중복 무관하게 첫번째 나오는 하나의 요소를 찾아야 할떄는 find()가 가장 적절하다. [샘플예제 :javascript] const students = [ {name : 'hong' , score : '100'}, {name : 'kim' , score : '60'}, {name : 'seo' , score : '90'}, {name : 'lee' , score : '80'}, {name : 'jung' , score : '40'}, {name : 'han' , score : '50'} ] //50점 학생 찾기 { const student = stude.. 2021. 2. 23.
[프론트엔드] HTML 데이터 속성 dataset FrontEnd HTML Element Attribute - Dataset HTML 데이터 속성은 엘리먼트 내 attribute명으로 data- + 키이름 으로 사용 Javascript 에서 해당 데이터의 속성을 접근하기 위해서는 엘리먼트명.dataset.키이름 ※일반적인 객체와 같이 dataset[키이름] 으로는 접근 불가! [샘플 예제] [결과 출력] 2021. 2. 23.
[Javascript] 배열 (Array) - map() 자바스크립트의 Array.map(CallbackFunction):Array 함수는 배열의 모든 요소를 순회하며 콜백 함수의 기능을 실행하는 역할을 한다. Array.map(CallbackFunc) : [] 배열 내 요소를 순회하는 방법에는 여러가지가 있지만, map 함수는 여러 줄을 사용하는 for 에 비하여 코드양이 적어지고 가독성이 좋아지기때문에 사용을 많이 하는 편이다. const arr = [1,2,3,4,5]; const arr_map = arr.map(val => val*2); console.log(arr_map); [출력 결과] [2,4,6,8,10] 2021. 2. 23.
[CSS] Transform 속성 span 태그에 적용하기 CSS Transform 속성을 Span 태그 등 inline태그에 적용시 반응이 없을때가 있다. css transform 속성은 display : inline 속성을 가진 태그에는 적용이 되지 않는다. 만약 원하는 태그가 transform 속성이 적용되지 않는다면, inline 태그가 아닌지 확인하고, 해당 속성을 inline -> inline-block 으로 변경해보자 [SPAN 태그 display : inline] [SPAN 태그 display : inline-block] 2021. 2. 22.
728x90

티스토리툴바