26년 3월, 학교 관계자들과 법적 협의를 진행하면서 학생들의 정보를 가져오는 openAPI를 사용하지 않는 것으로 결정났다.따라서, 회원가입을 통해 지원을 하였던 학생들의 기존 사용방식을 개선해야 했다.{ "username": "202215064", "name": "유승준", "email": "gksrnr66@gmail.com", "department": "휴먼AI전공학과", "secondDepartment": null}원래는 위와 같은 방식으로 학생임을 인증 하고, 지원자로써 인증 후 권한을 인가 하였다.현재는 비 로그인 상태에서도 바로 지원할 수 있게 바꿔야한다. 하지만 문제점이 있었다. 지원자들이 파일 혹은 이미지 업로드 후, 사이트를 이탈하게된다면 어떻게되는가? S3 ..

블록체인 · CBDC 프로젝트 개념 정리1. 블록체인이란?1-1. 기존 중앙화 시스템과의 차이구분 관점중앙화 시스템 (은행, 카카오페이 등)블록체인 기반 시스템 (프로젝트 한강)(1) 데이터 저장 방식기존 은행 시스템 및 전산시스템을 통한 중앙 집중식 관리분산원장(Distributed Ledger) 기술에 기반하여 참가 기관들이 정보를 공유 및 기록(2) 신뢰의 원천중앙 기관(은행 등)의 공신력 및 내부 통제분산원장 기술 및 한국은행-참가은행 간의 시스템 참가 약정과 제정된 규정(3) 단일 장애점(SPOF) 여부있음 (은행 전산 시스템에 의존)없음 (여러 노드에 데이터가 분산/관리)(4) 거래 검증 주체개별 금융회사 또는 중앙 집중된 운영 기관한국은행(디지털화폐 시스템 주관) 및 참가은행들이 분산원장 네..

1. 개요모니터링 시스템의 전체흐름을 말하자면, 아래와 같다.**수집 (Prometheus) → 시각화 (Grafana) → 알림 (AlertManager)**Prometheus가 메트릭을 긁어서 저장하고, Grafana가 그걸 대시보드로 보여주고, AlertManager가 임계값 넘으면 슬랙(디코)로 쏴주는 것이다.아래 설명할 내용이 이 흐름의 어디에 해당하는지 파악해보자.설명할 내용해당 단계RED 메서드, Metrics/Logs/Traces무엇을 수집할지Node Exporter 배치, 서비스 디스커버리어떻게 수집할지EC2 태그 기반 레이블링어떻게 구분할지엔드포인트별 임계값언제 알릴지for 구문, Silence, 채널 분리어떻게 잘 알릴지SLO, Burn rate얼마나 정교하게 알릴지지금부터 정리할 내..

1. 개념 정립1-1. Presigned URL은 어떤 문제를 해결하는가?Presigned URL은 사용자가 보안 자격 증명이나 특별한 권한을 가지지 않은 상태에서도 클라우드 스토리지 (Amazon S3, OCI storage, … )의 특정 객체를 다운로드하거나 업로드 할 수 있도록 임시 권한을 부여하는 기능이다.이 기능이 해결하는 가장 큰 문제는 웹/모바일 애플리케이션 서버의 부하와 네트워크 대역폭 병목 현상이다.일반적으로 사용자가 미디어 파일이나 대용량 문서를 업로드할때, 트래픽은 애플리케이션 서버를 거쳐(Proxy) S3 같은 영구 저장소로 전송된다.그러나 Presigned URL을 사용하면 클라이언트가 애플리케이션 서버를 통하지 않고 S3로 직접 데이터를 업로드/다운로드할 수 있어,서버의 CPU..

해당 글은 Accelerate, Infrastructure as Code, Continuous Delivery 을 근거로 직접 작성함.1. 왜 자동화 하는가?배포 자동화를 해야 하는 근본적인 이유는 수동 프로세스가 반복 가능하지도(not repeatble), 신뢰할 수 있지도(not reliable) 않으며, 필연적으로 치명적인 “Human Error”를 유발하기 때문이다.기계는 지루하고 반복적인 작업을 완벽하게 수행하지만, 사람은 그렇지 않는다.사람이 배포와 구성을 수동으로 진행했을 때 발생하는 문제와 구체적인 사례는 다음과 같다.구상 드리프트(Configuration Drift)와 ‘SnowFlake’ 서버의 탄생수동 배포는 작업 순서나 타이밍의 미세한 차이, 작업자의 주관적인 판단 개입으로 인해 매..

ElasticSearch란?2004년 샤이 배논(Shay Banon)은 Compass 라는 이름의 오픈소스 검색엔진을 개발하는 사람이였다.처음 Compass 검색엔진 개발을 하게 된 계기는 요리 공부를 시작한 아내를 위해 레시피 검색 프로그램을 만들기 위해서였다.레시피 검색 프로그램에 아파치 루씬(Apache Lucene)을 적용하려던 중 루씬이 가진 한계를 보완하기 위해 새로 검색엔진을 만들기 위한 프로젝트를 시작한 것이 계기였다.2010년 샤이는 Compass를 Elasticsearch라고 이름을 바꾸고 프로젝트를 오픈소스로 공개하였는데, 곧 수 많은 검색 개발자들에게 인기를 얻으며 급속도로 성장하기 시작했다.(그리고 샤이 배논의 아내는 아직도 레시피 프로그램을 기다리고 있다..)Logstash, K..

📌 이 글은 스케줄러가 조용히 실패했다 — cron 버그 발견부터 AOP 기반 에러 알림까지의 후속 글입니다.1편에서는 "스케줄러가 실패해도 아무도 모른다"는 문제를 커스텀 어노테이션(@DiscordAlert)로 해결한 과정을 다뤘고,이번 글에서는 스케줄러의 또 다른 문제였던 트랜잭션 설계를 다룹니다.1. 배경: 배치 처리는 API와 다른 결이었다.스뮤클럽에서는 동아리 모집 마감을 자동화하기 위해 스케줄러를 사용합니다.학교에서는 동아리를 모집할 때 에브리타임에 구글폼 링크를 올려서 관리하는데,구글 폼에서 자동 마감을 하려면 Google Workspace Marketplace에서 플러그인을 설치해야 하는 귀찮음이 있습니다.그래서 저희는 스케줄러를 이용한 배치 처리로 자동 마감을 지원하도록 개발했습니다. ..

1. 배경: 캡처를 안 해놨다스뮤클럽(SMU-CLUB)은 교내 동아리 지원/관리 서비스입니다.이 서비스에는 4개의 스케줄러가 돌고 있습니다.동아리 모집 자동 마감 배치개인정보보호를 위한 30일 이후 동아리 멤버 정보 삭제 배치동아리 합/불 통보 이메일 재전송 배치Oracle Storage 고아파일 삭제 배치 서비스 오픈 전 테스트를 하던 중, 스케줄러가 동작하지 않는 걸 우연히 발견한 적이 있습니다.당시에는 고치는 데 급급했고, 솔직히 말하면 로그를 캡처해둘 생각을 못 했습니다. 이후 "로그를 저장해야된다는 것도 몰라서 이런일이 다시 일어나지 말아야겠다"라고 생각하고 로그를 .txt 파일로 저장하도록 하였습니다. 블로그를 쓰려고 보니 증빙할 게 없더라고요. 😅2. 로그를 다시 열어봤더니그런데 오랜만에 ..

문제세 개의 자연수 A, B, C가 주어질 때 A × B × C를 계산한 결과에 0부터 9까지 각각의 숫자가 몇 번씩 쓰였는지를 구하는 프로그램을 작성하시오.예를 들어 A = 150, B = 266, C = 427 이라면 A × B × C = 150 × 266 × 427 = 17037300 이 되고, 계산한 결과 17037300 에는 0이 3번, 1이 1번, 3이 2번, 7이 2번 쓰였다.입력첫째 줄에 A, 둘째 줄에 B, 셋째 줄에 C가 주어진다. A, B, C는 모두 100보다 크거나 같고, 1,000보다 작은 자연수이다.출력첫째 줄에는 A × B × C의 결과에 0 이 몇 번 쓰였는지 출력한다. 마찬가지로 둘째 줄부터 열 번째 줄까지 A × B × C의 결과에 1부터 9까지의 숫자가 각각 몇 번 쓰..

문제 KOI 전자에서는 건강에 좋고 맛있는 훈제오리구이 요리를 간편하게 만드는 인공지능 오븐을 개발하려고 한다. 인공지능 오븐을 사용하는 방법은 적당한 양의 오리 훈제 재료를 인공지능 오븐에 넣으면 된다. 그러면 인공지능 오븐은 오븐구이가 끝나는 시간을 분 단위로 자동적으로 계산한다. 또한, KOI 전자의 인공지능 오븐 앞면에는 사용자에게 훈제오리구이 요리가 끝나는 시각을 알려 주는 디지털 시계가 있다. 훈제오리구이를 시작하는 시각과 오븐구이를 하는 데 필요한 시간이 분단위로 주어졌을 때, 오븐구이가 끝나는 시각을 계산하는 프로그램을 작성하시오. 입력 첫째 줄에는 현재 시각이 나온다. 현재 시각은 시 A (0 ≤ A ≤ 23) 와 분 B (0 ≤ B ≤ 59)가 정수로 빈칸을 사이에 두고 순서대로 주어진..

문제 상근이는 매일 아침 알람을 듣고 일어난다. 알람을 듣고 바로 일어나면 다행이겠지만, 항상 조금만 더 자려는 마음 때문에 매일 학교를 지각하고 있다. 상근이는 모든 방법을 동원해보았지만, 조금만 더 자려는 마음은 그 어떤 것도 없앨 수가 없었다. 이런 상근이를 불쌍하게 보던 창영이는 자신이 사용하는 방법을 추천해 주었다. 바로 "45분 일찍 알람 설정하기"이다. 이 방법은 단순하다. 원래 설정되어 있는 알람을 45분 앞서는 시간으로 바꾸는 것이다. 어차피 알람 소리를 들으면, 알람을 끄고 조금 더 잘 것이기 때문이다. 이 방법을 사용하면, 매일 아침 더 잤다는 기분을 느낄 수 있고, 학교도 지각하지 않게 된다. 현재 상근이가 설정한 알람 시각이 주어졌을 때, 창영이의 방법을 사용한다면, 이를 언제로 ..

문제 (세 자리 수) × (세 자리 수)는 다음과 같은 과정을 통하여 이루어진다. (1)과 (2)위치에 들어갈 세 자리 자연수가 주어질 때 (3), (4), (5), (6)위치에 들어갈 값을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 (1)의 위치에 들어갈 세 자리 자연수가, 둘째 줄에 (2)의 위치에 들어갈 세자리 자연수가 주어진다. 출력 첫째 줄부터 넷째 줄까지 차례대로 (3), (4), (5), (6)에 들어갈 값을 출력한다. 예제 입력 1 472 385 예제 출력 1 2360 3776 1416 181720 ----------------------------------------------------------------------------------------------------------..

드디어 토익 졸업했다! 파트7이 약한걸 보완해서 rc1 2가 89,93으로 멱살잡고 캐리해서 RC400점으로 졸업!!!!! 점수 발표되고 5분동안 못보다가 뒷자리부터보는데 rc 400뜬거보고 집에서 혼자 아아악! 거리면서 소리질렀다 ㅋㅋ 그토록바라던 800을 30점 이상이나 더 받은 것에 너무 기뻐서 눙물,, 4월부터 ybm불라방인 미친토익 750반을 수강했었는데 2주만에 정체기를 극복하고 한달 반만에 rc가 직전시험대비 80점올랐다. 다들 토익준비중이면 개인적으로 미친토익 추천해요. 해커스도 다녀봤는데 미친토익 중급반이 경력이 15년이 넘으신 분들이라 확실히 내공이 다릅니다! 아래는 성적후기글!! https://cafe.naver.com/madtoeic/413824 [토익학원추천] 미친토익 듣고 [83..

요즘 편입 때문에 토익을 공부하고 있다. 살면서 위 사진과 같이 공부를 심각하게 해본 적이 초등학교 때 전교 1등 때 빼곤 없었던 것 같았다. 그 뒤엔 동기부여가 되지 않아 공부를 멀리했고 이렇게 저렇게 흘러가는 대로 살다가 공업고등학교에서 전기과를 나오고 대학은 조리과로 나온 다음 실무를 겪어본 내 경험을 적어본다. 산업군 전체를 다 포함하여 평가하는 건 아니지만 대체로 어느 곳이든 정말로 내 기대 수준 이하의 사람들만 있었다. 특히 마지막에 다녔던 회사에서의 대리 놈은 진짜 개인적으로 인간 실격 자본주의의 끝판왕 군대에서 하던 짓을 30대 중반이 넘어서도 하는 게 너무.. 이제 갓 들어온 3개월 차 신입자한테 1~2년 차 선배 수준을 뛰어넘길 바라는 것과 일부로 퇴근 안 시키고 한 시간 연장근무 시킨..

퇴사를 마음먹은 후 요리를 그만하고 "무엇을 해야 될까"라는 고민이 엄청 많았다.

📌 Will-change 기본적으로 브라우저에게 "뭔가 바뀔 것 이다" 말해준다. 브라우저는 애니메이션을 더 나아지게 한다. (브라우저에게 렌더링 힌트를 준다.) Element에 실행되길 기대하는 변화를 명시함. Will-change는 그래픽카드를 이용해서 애니메이션을 가속화한다 📌 Focus-inside 내부적으로 focus된 element가 있는지 알 수 있도록 해준다. Ex) rely:focus-within reply 내부에 어떤 element가 focus되어 있다면 이라는 뜻 .reply:focus-within .reply__column:first-child { display: none; }​ 설명: reply 안에 reply__column:first-child 가 있다면 display는 none..

🎁 코드는 항상 위에서 아래로 읽는다 그렇기 때문에 아래에 있는 코드가 1순위로 적용된다. (읽기는 위에서 아래 / 적용은 아래에서 위) Position fixed를 한 코드와 position:relative를 주지 않고 absolute를 준 코드가 있으면 적용 순서는 아래에서 위로 적용되는 것이다. Absolute를 이용하여 모든 화면을 덮는 div를 만든다고 치자 그렇다면 div가 맨 아래에 위치해야 모든 화면을 덮을 수 있다. 코드를 작성할 땐 항상 읽는 순서를 생각하여 적용되는 순서를 계산해야 된다. 🎁 적용하기! 화면을 가렸다가 나타나는 애니메이션을 만들어보자! 1. 먼저 화면을 가리는 div속성값을 주자 #splash-screen { background-color: var(--yellow); ..

🎈 Order 예시로 코드를 적어보자. .imbest { order: 0 } .imbest_info { order:1 } 각 태그에 숫자를 부여 한 후 숫자에 맞게 순서를 조정한다. Order는 flex children에게 만 적용된다. 🎈 flex-direciton: row-reverse flex의 children끼리 순서를 바꾼다. 더 알아보기 🎈 > ex) .reply__column:last-child > i { ~ property ~ } 여기서 > 는 direct(직접적인)로 children을 선택하는 방법이다. + button을 만들 때 absolute를 사용한 이유는 input 안에 button을 넣기 위해서이다.

😑 Conent를 적을 때도 소문자로 적는 이유 대문자는 디자인적 요소이기 때문에 css에서 대문자로 변경 가능하기 때문이다. ( HTML : 소문자 , CSS: 대문자변경 ) text-transform: uppercase; 소문자를 대문자로 변경해주는 attribute 이다. 😑 이전페이지로! 모든페이지에서 뒤로가기 버튼을 눌렀을 때 이전페이지로 연결하게 할 때 Href=”javascript:history.back()” 😑 z-index 기본적으로 div의 위치가 맨 앞에서부터 몇번째인지 나타내는 것 즉 layer의 순서가 몇번째 인지 나타내는 것이다. 기본값은 0 1, 2, 3, 4 숫자를 줄수록 몇번 째인지 정하는 것이다. + absolute position(절대적인 위치) or fixed posi..

🔨 Position: fiexd Position: fiexd로 레이아웃을 고정시킨 다음 Bottom:0; 으로 맨 아래로 내린다 맨 오른쪽 아이콘이 사라졌는데 마법의 한줄 box-sizing: border-box; 로 고정시킬 수 있다. Position fixed는 레이아웃을 기존 틀에 벗어나 완전히 고정시키는 효과가 있다 🔨 css: border box의 padding 200px 박스를 만들고 padding-left:50px; 를 준다고 하면 왼쪽에 50px크기의 box가 plus(+)된다. 이유: css에게 200px 박스를 원했으니 padding과 상관없이 200px를 유지하려는 것 하지만 전에 강의 내용처럼 .nav에 box-sizing: border-box; 를 주면 padding을 줘도 신경쓰..

🎨 Navigation bar 작업 Navigation는 Nav 태그로 작업한다. 🎨 VSC단축키(shortcut) 와 몇가지 꿀팁 nav>ul>li*4>a를 입력 시 한번에 완성된다. 그 후 Tab 버튼 한 번으로 간편하게 다음 내용을 작성 할 수 있다. 속성과 class이름은 같아도 상관없다. 메인styles.css에 다른 요소의 css를 import할 때는 순서를 지키는 것이 정말 중요하다. Reset.css에서 color는 inherit(상속)으로 text꾸미기는 none;로 설정하여 기본설정을 비워 둔다.

🎨 html 구조 생성 단축키 : ! 🎨 주석 주석: 프로그래머만 볼 수 있는 코드 (브라우저에서 표시x) 단축키: 내용 작성 후 ctrl+/ 🎨 underbar Status-bar”__”column 의 언더바 2개는 문장을 이어주는 역할 🎨 BEM (Block Element Modifiers) Blcok, Element, Modifier 세 가지로 구성된 이름을 짓는 것이다. 각각 __와 --로 구분한다. BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용한다. 또, '어떻게 보이는가'가 아니라 '어떤 목적인가'에 따라 이름을 짓는다. 출처 [CSS 방법론] BEM 방식 오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지..

🧡 @media 관련하여 예시의 코드를 작성해보자. @media screen and (min-width: 600px) and (max-width: 800px) screen의 최소사이즈가 600px과 최대사이즈 800px의 사이라는 뜻이다. 해석하면 최소사이즈와 최대 사이즈 사이에서 작동하게 하는 코드이다. 이렇게 코드를 짜면 코드 한 줄로 상태가 변하는 걸 확인할 수 있어서 편하다. 🧡 가로 세로 모드 구별하는 법 @mediascreenand (orientation: landscape[가로]) 더 알아보기 🧡 정리하기! 1. Media query는 원하는 css 조건을 추가할 수 있다. 2. Media query는 and를 써서 연결된다. 3. Min/max-device-wdth = 휴대폰 적용, 브라우..

🤔 Transition 상태를 변하는 모습을 애니메이션화 한다. ex)style에서 a와 a:hover이 있다 - state가 없는 요소에 붙여야 한다. => ex) a:hover 불가능 - 가장 처음 태어난 곳(root), element에 있어야 한다. - 변화를 시키려면 양쪽 같은 속성이 꼭 있어야한다. - All = a 에서 a:hover 전부 변화 - Element를 선택해서 변화도 가능 😮Transition 명령어 (* = 대부분 사용) - Linear: 같은 속도로 변화 - *Ease-in: 초반에 빠르게 - *Ease-in-out: 느림 – 가속 - 느림 - *Ease-out: 끝에서 느리게 - Ease: 느린 시작 - 빠르게 - 천천히 종료(기본값). 🎉 transition 명령어 직접 경..

css에서 색깔은 매우 중요하다! 😃 css 색깔에 대한 코드 입력방법 3가지 # = 16진수 컬러코드 Rgb = (0, 0, 0) 값 Rgba = rgb+투명도값 vsc(visual studio code)에서는 tomato pink gray green 이런 식으로도 값을 줄 수 있다. (16진수 컬러에 포함됨) 😎 잡기술 :root = 변수를 저장 할 수 있는 기능 같은 코드가 반복되면 :root를 이용하여 변수로 만드는 것이 좋다. Ex) 추가내용

input:optional 속성이 설정되지 않은 모든 요소에 적용한다. input:지정 지정한 인풋을 설정할 수 있다. type이든, type안의 text든, placeholder의 username이든 무엇이든 가능하다. 😃 states의 "~"에 대하여 만약 placeholder~=”name”으로 설정되면 Name를 “포함한” placeholder은 다 적용된다. "~"는 포함한 모든 것을 적용시킨다. "$"는 작성한 것에서 끝에 오는 경우이다. "^"는 작성한 것에서 처음에 오는 경우이다. 😃 states 기능 몇가지들 element:active 요소를 누를 때 작용. element:hover 요소를 가져다 댈 때 작용. element:focus 요소가 선택되었을 때 작용 (키보드로도 가능). a:v..

CSS pseudo class 는 선택된 요소의 특별한 상태를 지정하는 선택기에 추가된 키워드입니다. 예를 들어, :hover사용자의 포인터가 버튼 위에 있을 때 버튼의 색상을 변경하는 데 사용할 수 있다. :last(or first) child = 중복된 요소 중 마지막(혹은 첫번째) 타겟 :nth child (N) = 괄호안에 몇번째 자식을 넣을지 적고 타겟 가능 1) even(짝수) 넣을 시 2, 4 6, 8 . . . 2) odd(홀수) 넣을 시 1, 3, 5, 7 . . . 3) N+1 ( n번째요소로부터 +1) 2n, 3n, +1, +2 가능 4) N은 0부터 시작 🎈 😃 p 사이에 있는 span 만 변경하고 싶을 때 😃 ">" 에 대하여 div > span 는 div 바로 아래의 span만 ..

https://fluanceifi.github.io/kokoa-clone-2022/ Welcome to Kokoa Clone No Service 18:43 100% fluanceifi.github.io 브라우저의 가로사이즈를 650px이하로 낮추셔야합니다! 내가 요리를 그만해야겠다 생각하고 많은 고민 끝에 코딩을 배우자고 결심한 것은 한번 배운 지식으로 평생을 일하는 삶의 가치가 매마른 사람이 되는 것이 아니라 스스로 계속 발전해 나가는 것이 내 삶의 가치와 발전을 위해 중요하다고 생각하기 때문이였다. 내가 비록 훌륭한 요리사가 되는 것은 포기했지만 요리를 하는 사람들에게 필요한 서비스를 제공하는 사람이 되는 것이 더 값진 삶이라 생각하여 개발자라는 길을 택했다고, 미래의 내가 지금의 나에게 옳은 선택이..

1. 자식 element에는 어떤 것도 적지 말아야 한다. 부모 element에만 명시해야 된다. Ex) 부모 자식 자식 자식 부모 Display:Flex;를 이용한 다양한 속성들 Justify-content: center; (중심) Justify-content: end; (우측 끝으로) Justify-content: start; (기본값default) Justify-content: space-evenly; (자동 간격 정렬) Align-item: stretch (늘어남) but 요소(element)의 높이(height)를 고정시키면 적용 안됨 Ex) 1. 주축(main axis), 교차축(cross axis) 매우중요 Justify-content = 주축에 적용된다. Align-items = 교차축에 ..

Margin: box의 border(경계)로부터 outside(바깥)에 있는 공간이다. margin값에 따라서 경계의 크기가 결정된다. 4방의 경계를 모두 각각 부여할 수 있다 Ex) margin-top: 10; margin-left: 20; margin-right; 50; margin-bottom: 30; 상하좌우: margin:value; 상하, 좌우: margin: value value; 상 우 하 좌: margin: value value value value; 없앨 경우: margin: 0; margin을 쓸 땐 꼭 따음표 금지,, 30분날림,, margin의 현상 Collapsing margins(마진상쇄)현상 Box의 border가 겹치면 margin은 하나가 된다. 위, 아래로만 발생한다. ..

box에 대한 동작요소 1.style에서 같은 box(div header body footer ...) 묶으면 전체 적용 2. 브라우저에서 div는 적용되면 옆에 어떠한 박스도 오지않는다. => block span은 적용되면 옆에 다른 요소가 따라온다. => inline 이러한 형태를 이해하면 디자인에 도움이 된다. Inline에 포함되는 것 작은 글(span), 링크(a), 그림(img) Inline = no box (높이와 너비가 없다.) Block에 포함되는 것 대부분의 박스들 Block = box 즉 inline에 포함되는 것들을 외우면 구분하기 쉽다. Block -> Inline으로, Inline -> Block으로 가능하게 되는 법 = display:block Inline->Block은 그냥 ..

그래서 CSS가 뭔데? Cascading Style Sheet 브라우저가 CSS코드를 읽을 때 위에 있는 코드부터 차례차례로 읽힌다는 것. ㄴ> 그래서 중복이 되면 항상 마지막에 쓴 코드가 적용된다. ㄴ> 즉 코드의 순서가 결과의 영향을 끼친다. inline CSS html파일에 css코드를 입력하는 것 (tag:style를 이용) external CSS CSS파일을 include 하는 것 (link tag[]를 이용)

1. css = html 태그를 가르키는 일 [Point!] ex) this tag looks green! 2.Point = selector(속성) ex ) blue title 은 파란색, 글자크기, 글꼴 등등,, 3. selector을 하나로 묶기 위한 방법 { } curly bracket(중괄호) 올바른 selector 사용방법 tag grab { selector:value; } h1 { color:blue; } 항상 띄어쓰기를 하지않게 주의해야된다 CSS의 모든 속성(selector)들은 어떤 값(value)이든 쓸 수 있다. 하지만 color는 색을 써줘야 한다.

방법은 2가지가 있다! 1. html파일에 html 코드와 css 코드를 놓는 방법 ( tag:style ) 2. css와 html을 분리시킨다. () rel= relationship (관계) rel="stylesheet" 필자는 원하는 부분의 css를 정리해서 볼 수 있는 2번 선택지가 더 좋다고 생각한다. style.css에 @import로 작성을 원하는 css를 만들어 이어지게 만들면 정리가 편하기 때문이다

😃웹사이트의 기본요소 html 뼈 css 근육 js 뇌 😃태그순서 tagname attribute="ooo" content /tagname 😃주의할 점 attribute(속성값)은 항상 ""(큰 따음표)사용하기. 😃이해하기 모든 tag는 attribute(속성값)을 가질 수 있다. tag는 attribute을 사용해야 강력해진다. 어떤 attribute는 모든 태그가 사용 할 수 있지만 일부 tag에서만 쓰이는 attribute도 있다. 코드만으로 의미를 가진 특정 요소(element)들을 잊지말자 div = header = main = footer 처럼... 태그가 가진 semantic(의미)를 잘 사용하면 깔끔하고 보기 좋게 작성할 수 있다. (팀과 다른 사람을 위해서라도) 😃명심할 것! 태그는 외우..

html은 태그와 태그 조합이다. Element 조합. 태그를 꾸미려면 속성(attribute)을 넣는다. ex)

link - 링크 1) rel ="shortcut icon" 탭 이미지 size="16x16 32x32 64x64" 크기설정 href="~~~" 이미지링크 meta - 부가적인 정보 1) charset="utf-8" 브라우저의 text가 어떤 형태인지 알려줌 2) content의 name="descrition" 웹사이트의 부가 설명 (구글검색에 나타남 브라우저의 부연설명을 해줌) 만약 name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없습니다. 모든 css나 javascripts 등 tags를 검색할 때 검색엔진에 mdn을 붙여서 검색한다! ( firefox 제공 ) tags..

웹사이트 구조는 두개로 나뉜다. head : 웹사이트의 환경을 개발한다. body : 사용자가 볼 수 있는 content를 제공한다. 모든 브라우저 화면 상에 보여질 내용은 body 태그에 입력해야한다.(head로 넣으면 css나 js에서 오류를 뿜는다) ---------------이러한 순서대로 코드를 입력해야된다.--------- DOCTYPE html> HELLO WORLD! hello! let's go to google! ------!doctype html => html=> body => 이후로는 자유------

html 에서는 tag로 text를 넣는다. tag는 title이 될 수도 있다. html은 태그 안에 text를 적어서 웹사이트를 만드는 것이다. 기본적으로 사용하는 tag ol : ordered list (순서가 있는 목록) ul : unodered list (순서가 없는 목록) li : list item (목록요소) prettier : 실수가 있을 때 수정해주는 VSC 확장프로그램 h1~h6: 제목 1~6 a : anchor 덫이라는 뜻으로 링크라생각하면 된다. 여기에 href라는 속성 값을 같이 넣어주면 http refernce 혹은 hyperlink reference 라고 하여 주소를 적어주면 된다. attributes(속성): tag 에 추가하는 부가적인 정보 => 가능한 태그가 따로 있다. ..

html : 뼈대 content 구조가 어떤지 설명하는 것 웹사이트의 틀을 짜주는 역할 ex) title, link header sidebar ... css : 근육 html과 함께 사용한다. 브라우저에게 어떻게 보여야하는지에 대해 알려준다. (디자인) 디자인을 이용해 스타일을 만드는 역할을 한다. html만 사용하려면 사용할 수 있지만 css는 html이 꼭필요하다. ex) title-> green , yellow text -> 16p image ->가로 100px, 세로100px javascript : 뇌 *프로그래밍 언어 클릭하면 무슨일이 일어나게 해주는 역할 즉 웹사이트의 상호작용(interactivity)을 가능하게 하는 언어이다. (목록, 스크롤 바, 메뉴 애니메이션, 등등) 브라우저는 멍청하..

웹사이트 title / text / image 모든 상호작용(interactivity)가능한 버튼은 모두 저 3가지를 기본을 바탕으로 이루어져있다. 웹사이트의 코드를 보면 text를 이용했을 뿐 다른 건 없다. 웹사이트에서 text로 이루어진 코드를 브라우저에 입력하게되면 코드가 구현되어 우리가 볼 수 있는 사이트가 완성되는 것이다. 브라우저 브라우저는 나를 위해 웹사이트를 만들어주고 만들어준 웹사이트에 text로 코드를 입력하여 title / text / image를 구현해주는 것이다. 개발자로써 해야할 일은 어떤 종류(what)의 text를 어디에(where) 사용해야 하는지 배우는 것이다. text=laungue=언어 웹사이트는 2개나 3개정도의 언어로 구성되어있다.

22년 8월 19일 노마드코드 코코아톡 클론코딩 let's go~