전체 글
-
Sass(SCSS) 기본 공부 1HTML5_CSS3/sass 2023. 4. 5. 00:02
*나나님의 아무튼 Sass 시리즈 + W3school 을 보고 공부합니다. CSS 전처리기 자신만의 문법을 가지고, CSS 생성하도록 하는 프로그램 CSS의 단점인 단순 반복 등을 보완하기 위해 생긴 프로그램 정규 CSS에 없는 다양한 내장함수를 갖고 있고, 변수/ 함수 생성도 가능하다. CSS 전처리기는 기본 브라우저에 탑재되어 있지 않으므로, 컴파일 과정을 통해 사용해야 한다. 더보기 결국, CSS 전처리기를 사용하려면 1) 우선 CSS 전처리기를 사용해 코드를 작성한다. 2) CSS 컴파일러를 이용해 CSS 전처리기를 CSS로 컴파일한다. *컴파일러 설치 대신 컴파일만 하려면 사이트에서도 가능하다. Sass 컴파일 사이트 : https://www.sassmeister.com/ (테스트 가능) 1. ..
-
크로스 브라우징 도대체 어떻게 하는건가?HTML5_CSS3 2023. 4. 4. 00:39
크로스 브라우징이란? 크로스브라우징이란 간단하게 다양한 환경이나 브라우저에 동일하게 화면이 처리 / 표시되도록 하는 것 👉👉 모든 것을 100% 똑같이 보이게 처리하려고 하는 것보다는, 어느 한쪽에 치우치지 않도록 공통 요소를 사용해 웹페이지를 만드는 것이며 그로 인해 브라우저나 환경에 따라 정보로서 소외감을 느끼지 않도록 하는 것을 의미한다. 크로스브라우징 실무, 크로스브라우징 하는 법 검색을 해봐도 사실 명확하게 답을 주지 않는다. 그 중에서도 정리하자면, 태그 reset을 해준다. 1) 각 브라우저마다 태그의 기본값이 다르므로 기본값의 차이를 없애기 위, 태그 reset을 해줄 것 *reset은 회사의 필요에 따라 본인에게 맞는 것을 사용 + 추가할 것 추가해서 사용한다. - https://meye..
-
반응형 단위(레이아웃과 폰트사이즈)HTML5_CSS3 2023. 4. 1. 01:07
1. 반응형 레이아웃 1. 전체적인 레이아웃 요소들은 %로 레이아웃을 잡아준다. (100% 기준) 더보기 1) 큰 레이아웃의 요소들은 / / / / width:100% 기준으로 2) 단의 구성 float와 해당 단을 100%로에서 나눠준다. 4단이면 width: 25% 3) 터치영역은 최소 44pxdisplay:block; height/width/padding 을 사용해서 터치영역 확장시켜 준다. 2. 10~20 정도의 약간의 여백, padding 또는 margin은 px로 처리 3. rem을 사용할 때는 구성할 때 px로 구성 후 rem단위로 환산해준다. 1번 방법) - 요소에 display:inline-block을 주고, width 값에는 100%를 요소의 개수로 나눈 값으로 지정해준다. - widt..
-
첫 코딩테스트 및 사전과제공부/코딩테스트 2023. 3. 29. 13:46
첫 코딩테스트(사전과제)를 진행하였다. 반응형 웹을 만드는 과제였는데, 당연히 알고 있던 부분이라 생각했는데 막상 만들어보니 반응형 프로젝트 당시에 고민했었던 부분이 다시금 고민거리로 떠올랐다. 경험과 센스의 영역이려나 싶다. 어찌됐든 퍼블리셔로 가게 되려면, 자격요건이나 우대사항에 반응형 웹 제작은 필수이니 고민했었던 부분을 해결할 수 있도록 공부와 연습이 필요할 것 같다. 1. 폰트 사이즈 (미디어쿼리로 처리는 둘째치고, 어떤 단위를 써야할까) 2. 뷰포트 사이즈 조정 시 넘어가는 영역을 어떻게 처리할까 + 질문이 생기면 그때그때 적극적으로 물어볼 것!
-
ChatGTP로 nav 메뉴 만들기공부 2023. 3. 2. 23:37
챗지피티 드디어 해봤다. 다들 해봤냐고 물어봐서 궁금했는데, 신기하긴 진짜 신기하다. 마크업 언어로 내비게이션 메뉴 만들어달라고 요청했더니 html, css를 이용해서 뚝딱 만들어줌 혹시 몰라 css 대신 sass로 만들어달라고 요청했더니, 친절하게 사용법까지 알려준다. 친구한테 농담삼아 내가 사장이었음 사람대신 20불 내고 챗지피티 쓴 다했는데...왠지 가능성이 없진 않을 듯싶고😥... 게임회사 다니는 지인도 써봤는데 본인이 만든 코드보다 더 깔끔하게 만들었다고..ㅎㅎㅎㅎ *오늘의 결론* 1. 챗지피티 신기하다. 2. 퍼블리싱 뚝딱일까? *챗지피티 사이트 https://openai.com/blog/chatgpt
-
state 개별 숫자 증가, props프레임워크/리액트 React 2023. 1. 19. 01:09
1. 과제 1-1. 반복문 처리 없이, 👍 클릭시 개별적으로 숫자 증가 구현하기 /*eslint-disable*/ //경고메세지가 뜨는 eslint 기능을 꺼준다. import './App.css'; import {useState} from 'react'; function App() { let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); let [좋아요, 좋아요변경] = useState([0,0,0]); let [modal, setModal] = useState(false); return ( ReactBlog {글제목[0]} { let good = [...좋아요]; good[0] = good[0] + 1; 좋아요변경(good) } }>👍 {좋아요..
-
map()프레임워크/리액트 React 2023. 1. 17. 01:33
리액트에서 반복문 처리 JSX에서 자바스크립트 사용시 중괄호를 쓰고, 안에다 입력한다.주로 사용했던 조건문인 if문 대신 {} 안에서 삼항 연산자를 사용했듯,반복문을 처리할 때는 for문 대신 map() 을 이용해 반복문을 처리해야 한다. array.map() ⭐반복문 사용 시 유용하다! array의 자료 개수만큼 함수 안의 코드를 실행해준다. 함수의 파라미터는 array 안에 있던 자료이다. return 오른쪽에 있는 것 array에 담아준다. //array.map(콜백함수); array.map(function() { 실행할 코드 }); [1,2,3].map(function(a) { console.log(a) // 1,2,3 순서대로 나옴 }); [1,2,3].map(function(a) { retur..
-
컴포넌트 생성, 사용하기프레임워크/리액트 React 2023. 1. 16. 18:23
컴포넌트 html은 사용이 많아지기 때문에 코드가 더러워지는 단점이 있다. 리액트에서는 이 부분을 해결하기 위해 컴포넌트를 만들어 사용한다. 뿐만 아니라 해당 컴포넌트를 보면, 어떤 기능을 하는지 명확히 알 수 있는 장점도 있다. → 가독성이 좋아지고, 코드의 재활용에 좋다. 1. 컴포넌트(component) 생성 function을 만들고, return() 안에 html 담기 쓰기 또는 1) 주의사항 다른 function 바깥쪽에 작성할 것 function 이름은 영문 대문자로 시작 (ex: Modal) return() 안에는 하나의 태그로 시작해 하나의 태그로 끝나야 함 → 여러개의 태그를 사용하고 싶을 때는 가장 바깥쪽에 로 감싸준다(fragment 문법) → 참고사이트 : https://ko.rea..