목록2020/12 (43)
디케이
정수(1 ~ 100) 1개를 입력받아 1부터 그 수까지 짝수의 합을 구해보자. 참고 while( ) {...}, do {...} while( );, for(...; ...; ...) {...} 등의 반복문은 형태만 다르 고, 똑같은 성능을 발휘한다. 필요에 따라 편리한 것으로 골라 사용하면 된다. 예시 //아래의 예는 홀수일 경우만 더해 그 결과를 출력한다. int sum=0; int i, n; scanf("%d", &n); for(i=1; i
정수(0 ~ 100) 1개를 입력받아 0부터 그 수까지 순서대로 출력해보자. for((반복전 실행/준비 내용); (조건 검사 내용); (한번 실행한 후 처리할 작업)) { //코드블록 ... } 반복 구조를 사용하자. 참고 for((반복전 실행/준비내용); (조건 검사 내용); (한번 실행한 후 처리할 작업)) { //코드블록 ... } 구조는 while( ) {...}, do {...} while( ); 구조와 같이 어떤 작업을 반복적으로 수행할 때 가장 일반적으로 많이 사용하는 구조이다. while( ) {...}, do {...} while( ); 과 다르게 반복을 위한 초기화/준비, 조건검사, 반복 후 증감 등을 한 번에 작성할 수 있다. for( ... ) 를 사용할 때에는 반복 실행되는 과정에..
영문자(a ~ z) 1개가 입력되었을 때 그 문자까지의 알파벳을 순서대로 출력해보자. 참고 do { //코드블록 ... }while(조건); //do~while( ) ; 구조는 반드시 마지막에 세미콜론(;)을 붙여야 한다. 구조를 사용하자. do { //코드블록 ... }while(조건); 구조는 while( ) { ... } 과 유사한 반복 실행 구조를 만들 수 있는데 다른 점은 무조건 한 번은 실행된다는 것이다. 마지막에 세미콜론을 반드시 붙여야 한다. 예시 char x, t='a'; scanf("%c", &x); do { printf("%c ", t); t+=1; //t+=1; 는 t=t+1과 같은 의미이다. }while(t
고정된 너비만을 제공하는 레이아웃에서는 서버단에서 화면에 출력할 글자수를 미리 가늠하며 디자인하기가 수월합니다. 레이아웃이 유동적인 너비를 가지거나 서버 스크립트쪽에 접근할 수 없어 글자수를 제어하기 곤란할 경우에는 아래에서 설명하는 방법들이 추천됩니다. 한 줄 단위로 글자 자르기 처음으로 적용해 볼 것은 한 줄, 혹은 여러 줄에 걸쳐 출력되고 있는 글자들을 지정된 너비에 맞게 한 줄 단위로 자르는 법이다. 이는 여러가지 CSS 속성들을 조합하여 조건을 맞추는 일부터 시작된다. 출력될 너비 조정하기 CSS로 글자 자르기를 위해서는 글자가 출력될 너비가 필요하다. 기본적으로 CSS 박스 모델 (box model) #1 에서 살펴봤듯이 display 속성의 inline 값과 같이 요소의 너비를 가질 수 없는..
파비콘에 대해 궁금했던 내용들을 정리했습니다. 파비콘(favicon) 소개 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫는다. 이 아이콘은 즐겨찾기에 웹페이지를 등록할때도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하며, 사이트의 성격을 드러내기도 한다. 최근에는 터치(touch) 아이콘, 타일(tile) 아이콘의 등장으로 더욱 혼란스러움이 가중되었으며, 각각의 기기에 최적화된 파비콘의 크기를 재설정하여 개발자들에게 어려움을 주고 있다. 파비콘(favicon) 기본 설정 1999년에 인터넷 익스플로러(Internet Explorer)에 처음 도입된 후로, 파비콘의 사양은 거의 변경되지 않은 채로 대부분 아이콘(ico) 파일의 형태로 도메인(domain)의 루트(root..
[공통] 마크다운 markdown 작성법 1. 마크다운에 관하여 1.1. 마크다운이란? Markdown은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. 마크다운이 최근 각광받기 시작한 이유는 깃헙(https://github.com) 덕분이다. 깃헙의 저장소Repository에 관한 정보를 기록하는 README.md는 깃헙을 사용하는 사람이라면 누구나 가장 먼저 접하게 되는 마크다운 문서였다. 마크다운을 통해서 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부..
01. Mosaic 02. Text Switching 03. Fade In/Out 03. Panel Up/Down 04. Easing Zoom 04. Panel Float 05. Area Extension 06. Grid Line Trough 07. Embossed Rectangle 08. Text Troughout 09. Shutter Frame 10. Gradient Background 이 글 공유하기: 공유 4Pinterest에서 공유하려면 클릭하세요 (새 창에서 열림)4 이전 사이트 유니세프 기후변화 캠페인 다음 사이트 기하학적 도형과 수학 지리학 모양을 모티브로 한 아름다운 디자인 소재 8
1. 화살표 간단한 화살표 만의 패턴에서 흔히 볼 수있는 border지정한 요소를 transform: rotate(-45deg);이지 회전시킨 것입니다 CSS를 다음과 같이 설명합니다. CSS a { padding-top: 60px; } a span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box; } 2. 화살표 × 서클 이곳은 방금 화살표..
전체적으로 메인페이지를 만들 때는 내비게이션 바를 만들 때보다 더 쉬웠던 것 같다. 적용하기에 어려운 부분은 애니메이션처럼 움직이는 부분이었고 나머지는 할만했다. ✌🏻 Background Image 🖼 배경 이미지에 적용하고 싶었던 효과는 크게 두 가지였다. ☝🏻, 스크롤을 해도 고정되어 있을 것. ✌🏻, 화면에 표시되는 폰트보다 뒤에 있는 느낌으로 조금 어두울 것. 배경 이미지 고정 📌 이 부분은 구글링으로 아주 쉽게 찾을 수 있었다. CSS .main_1 { background-image: url(images/main.jpg); height: 100vh; background-size: cover; background-attachment: fixed; } background-attachment: fix..