💻Front-end 🎨UI, UX 📒Log

C C언어는 현재 사용되고 있는 거의 모든 컴퓨터 시스템에서 사용할 수 있는 프로그래밍 언어이다. 현재 널리 사용되는 주요 운영체제의 커널은 대부분 C언어를 이용해 구현되어 있다. 이처럼 C언어는 시스템 프로그래밍에 가장 잘 어울리지만, 응용 프로그래밍에도 많이 사용되는 프로그래밍 언어이다 C++ C++은 기존의 C언어에 여러 가지 기능을 추가하여 만든 프로그래밍 언어이다 C++은 C언어에서 절차 지향적 언어의 특징을 가져왔다 또한, Simula에서 클래스를 사용하는 객체 지향적 언어의 특징을 가져왔다 그와 동시에 템플릿으로 대변되는 일반화 프로그래밍 방식의 언어이기도 하다 C++은 C언어를 기초로 삼아 만든 언어이므로, 기존의 C 표준 라이브러리를 그대로 사용할 수 있다

@keyframes 스테이지들을 정의하고 각 구간마다 다른 스타일을 적용 시킬때 쓰는 쿼리 우리가 정한 이름 스테이지 : 0%-100%, from(0&와 같음) 그리고 to(100%와 같음) CSS 스타일 : 각 구간에 적용시킬 스타일 페이지 넘어갈 때, 서서히 페이지 보이게 하기 .container { //css -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ animation: fadein 2s; } @keyframes fadein { //keyframes 쿼리 from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyfr..

.box { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ 타이포디자인 할때, width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ 중요 width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */ 중요 } // 실제 접속시 스마트폰 기기의 실제 가로폭을 보고 렌더링 해주는 메타 태그 @media screen and (max-width : 1200px) { //태블릿 1200px 이하일 경우 class 적용 .box { font-size : 40px; } } @media screen and..

OG 메타테그 Favicon - link 아이콘

dispaly : flex ? : 가로 정렬로 배치 * 추가 요소 .flex-container { display : flex; / 부모한테 적용 justify-content : center; /* 좌우정렬 */ center 중앙, start 좌측, end 우측 align-items : center; /* 상하정렬 */ flex-direction : column; /* 세로정렬 */ flex-wrap : wrap; /* 폭이 넘치는 요소 wrap 처리 */ } .box { flex-grow : 2; /* 폭이 상대적으로 몇배인지 결정 */ 박스 비율 nav-bar 만들때 사용 ! }

nesting 부모 루틴 안에서 자식 루틴을 넣어서 짜는 것이라고 보면 된다. const MyStyle = styled.div` width: 50vw; height: 150px; background-color: ${(props) => (props.bg_color? "red" : "blue")}; p { color: red; } `; p 태그라는 자식요소를 추가 시켜서 nesting 시켜줬다. & : 부모 참조자 선택 (div) &:hover { background-color: yellow; }

@1-1. HTML, CSS 나는 구역을 나누죠 나는 문단이에요 bullet point!1 (앞에 점) bullet point!2 h1은 제목을 나타내는 태그입니다. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 ex) 한 글자씩 색 넣을때 a 태그입니다: http://naver.com/"> 하이퍼링크 img 태그입니다: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요? --------------------------------..