All

[CSS] reset.css / css 리셋

웹을 개발하다보면 설정한 css가 제대로 적용되지 않는 경우가 있다. 이는 각 웹브라우저(크롬, 파폭, 엣지 등)가 기본으로 설정된 css위에 자신의 css가 덧씌워지기 때문에 그렇다. 이를 위해 기본적으로 css는 리셋해주는 것이 좋고, 이는 다음과 같은 방법으로 해결할 수 있다. 의 사이에 태그를 넣어준다. 이를 이용하면 설정한 css가 정상적으로 적용됨을 확인할 수 있다. 다만, 자신의 css보다 무조건 윗줄에 두어야 자신의 css가 씹히는 것을 방지할 수 있다.

윈도우에서 이모지(🎈😀🧓🥞) 사용 방법

맥에서는 이모지 키가 있어서 쉽게 사용할 수 있지만, 윈도우에는 따로 존재하지않는다. 웹 개발을 공부하다보니 필요해서 찾아보게 되었다. 윈도우키 + ";" 윈도우키 + "." 를 사용하면 동일하게 이모티콘을 사용할 수 있다.

[CSS] 박스 원형으로 만들기

박스 요소를 원형으로 만들고 싶을때가 있다. paint 앱을 만드는 과정에서 다음과 같은 상황이 나타났다. 이걸 원형으로 만들고 싶다면, 공식은 간단하다. width/2의 값으로 border-radius 값을 지정해주면 된다.

[Cozubi] 2021/03/04

2. 현재 진행된 것 1. 트위터 API로부터 GET response가 두개씩 오는 오류 수정. - componentDidMount() 함수내에 axios가 사용되는 함수를 넣음으로써 해결. - 분명히 렌더링 두번 되는 건 잡았는데 정확한 발생 원인은 모르겠다. - 로딩 시간도 살짝 빨라진듯? 2. 코인 종류 추가(최대 만원단위 코인까지만) -아직 한참남았다. 거의 총합 100개.. 한 70개 남은듯 3. 이후 해야할 것 1. 트위터 화면 모달로 만들기 - 팝업처럼: 그럼 배경화면이 새로고침되지 않아도 됨 2. 알람 울리도록. alert 보다 더 사용자에게 직접 와닿을 수 있는 그런 것? 3. 새로 글 뜬 코인에 대해 읽기전엔 느낌표 안 사라지게 하기 4. 코인 추가 5. 새로 공지 뜬 게 있으면 그것들..

[Cozubi] 2021/03/03

1. 진행된 것 1. 로딩 백그라운드 이미지 삽입 2. flex box사용하여 css 설정 3. 느낌표 이미지 삽입 4. twitter 링크 연동 2. 해야할 것 1. Twitter 화면이 팝업창처럼 뜨면 좋을듯. 2. 트위터 플러그인 직접 사용말고 리액트 훅? 사용법도 필요 3. 느낌표 뜨는 조건 설정 4. 알람뜨게 설정.

[CSS] 글자 / 텍스트 속성

텍스트를 다루는데 있어 속성들은 여러가지이다. 1. font-family: 폰트 자체를 지정. 고딕체, 명조체 등등 2. font-weight: 폰트의 두께를 지정한다. 1~1000의 숫자를 지정할 수도 있지만, 일반적으로 normal, bold, lighter, bolder 로 사용한다. 만약 두꺼운 글자나 얇은 글자를 지원하지 않는 폰트의 경우 적용되지 않을 수 있다. 3. line-height: 줄 높이(행간)을 지정할 때 사용한다. normal 또는 숫자로 지정할 수 있다. 단위 없는 숫자의 경우 폰트 크기를 기반으로 설정하고, 단위를 두면 px, %, rem 등 모두 사용할 수 있다. 보통 1.5~1.9 정도로 사용한다. 4. text-align: 텍스트의 맞춤을 지정한다. left, right..

[CSS] css의 단위 (px, %, rem, em, vw, vh)

1. "px": 화면 위의 1픽셀을 기준으로 하는 단위 1. "%": 부모 요소 크기를 기준으로 비율로 지정하는 단위 2. "rem": 루트 요소(html 요소)에 지정된 크기를 기준으로 배수곱 하는 단위 3. "em": 부모 요소의 크기를 기준으로 배수곱 하는 단위 4. "vw": "viewport width"의 약자로 브라우저를 볼 때의 출력 너비를 기준으로 퍼센트 곱 하는 단위 5. "vh": "viewport height"의 약자로 브라우저를 볼 때의 출력 높이를 기준으로 퍼센트 곱 하는 단위

[HTML] [6] 태그(5) - <br>, <blockquote>, <audio>, <video>, <span>

1. 줄바꿈을 위해 사용하는 태그이다. 다른 블록 요소 태그들의 내부에 사용하여 줄바꿈을 유도한다. 2. 인용문을 만들 때 사용하는 태그이다. 3. , 음성 데이터를 넣을 때, 영상 데이터를 넣을 때 사용된다. 4. 의미 없는 인라인 요소를 만들 때 사용한다. 주로 CSS를 이용하여 일부분만 장식할 때 사용된다.

[HTML] [5] 태그(4) - <header>, <article>, <section>, <div>, <navigation>

HTML의 태그들은 크게 2가지 부류의 태그들로 나눌 수 있다. 1. 블록 요소: , 처럼 앞뒤에 줄바꿈이 들어가는 블록을 만드는 태그 2. 인라인 요소: , 처럼 텍스트의 일부로서 다뤄지는 태그 3. 그룹 태그: , , 처럼 블록들의 그룹을 지정하는 태그 이 중 그룹 태그는 위의 설명처럼 블록 요소 태그들을 이용하여 여러 정보들을 그룹화하는 태그들을 의미한다. 그룹 태그는 내용을 직접 입력하는 태그가 아니라, 블록 요소들을 그룹화하여 CSS를 사용할 때 한번에 묶음 처리가 될 수 있도록 사용한다고 생각하면 쉽다. 1. 일반적으로 페이지 상부에 로고, 페이지 제목, 메뉴 등을 감쌀때 사용하는 태그이다. 태그와 엄연히 다른 태그이다. 태그는 웹 화면에 보이지 않는 내용을 다루는데 주로 사용하는 반면, 태그..

[HTML] [4] 태그(3) - 입력 양식 만들기

1. 은 입력 양식을 만들기 위한 태그이다. 태그를 이용하여 입력양식을 위한 컨테이너를 만들고, 모든 내부요소를 이 태그 안에 넣는다. 이 태그의 주요 속성은 다음과 같다. 1. action : 데이터의 전송될 페이지를 지정 2. method : 데이터 전송 방법을 지정- 주로 get / post 사용 3. name : 입력 양식의 이름을 지정 2. 태그는 사용자의 입력을 위한 태그이다. 이 태그를 사용하면 텍스트, 메일 주소 등등 다양한 입력값을 설정할 수 있다. 원하는 입력값의 속성을 "?" 부분에 넣으면 사용가능하다. 또한 "placeholder" 속성을 이용하여 텍스트 창에 기본 텍스트를 띄워놓을 수 있다. 1. text : 기본적인 텍스트(기본값) 2. search : 검색 전용 텍스트 3. e..