HTML+CSS 9

[HTML/CSS] 팀끼리 프로그래머스 사이트 만들어보기

2020.03.19 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 여섯째날 오늘은 팀끼리 프로그래머스 사이트 만들어보기를 했다ㅎㅎ 3명이서 팀이였는데 다들 실력이 비슷해서 머리 맞대서 열심히 만들어보았다!!! 미세한 부분까지 흡사하게 만들기 위해 많이 노력했다ㅎㅎ 여기서 포인트는 position:absolute;를 사용해서 가운데 정렬을 해줬다는 것이다!!! position을 사용하였더니 화면 비율을 바꿔도 원본사이트와 똑같이 위치에 변함이 없었음!! 요걸 사용해보았고, 배웠다는 것이 오늘의 큰 수확이었다! 탑프로그래머스 실력 체크 개발자 채용 테크 피드 코딩테스트 연습 프로그래밍 강의 계정만들기 로그인 기업회원 기술 중심 개발자 채용 플랫폼 개발자 채용의 끝은, 결국 코드니까 이력서보다, 당신의 ..

HTML+CSS 2021.03.19

[HTML/CSS] 프로그래머스 사이트 만들어보기

2020.03.18 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 다섯째날 오늘은 새로운 사이트 레이아웃 짜는 것을 연습해보았다. 프로그래머스 사이트!!! 난 이번에 처음 알게 된 사이트이다. 개발자 채용 홈페이지였다ㅎㅎㅎ 나도 나중엔 여기서 채용정보를 얻게 되겠지....? 홈페이지를 만들기 전에 전체적이 레이아웃을 짜보는걸 연습했다. 먼저 A4용지에 대략 어떤 엘리먼트와 태그를 써서 만들껀지 그려보고, 그걸 실행에 옮겼다. 그리고 못한 부분은 과제로 내주셨음 나는 다음과 같이 코드를 짰다.... 근데 넘 규칙도 없고 걍 생각나는대로 짜버렸음..... 결과물은 나름 괜찮게 보이는듯했지만...?? 별로 만족스럽지는 않았던.... 0 0 채용프로그램 더보기 0 0 채용중인 포지션 포지션 더보기 0 0 ..

HTML+CSS 2021.03.19

[HTML/CSS] 경일게임아카데미 사이트 거의 완성

2020.03.17 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 넷째날 팀원들이랑 같이 경일게임아카데미 사이트에서 포트폴리오까지 완성하라는 미션을 받았다. 나포함 팀원 4명 중 2명은 이미 사전수업을 들으셨고, 교수님이 평소에 잘하시는 분들이라고 항상 칭찬하셨던 분들이였다. 그래서 오늘 다른 팀보다 조금 빠르게 포트폴리오까지 완성하고 밑에 있는 레이아웃까지 완성했다. 아쉽게 사이트 하단에 있는 회색띠 부분에서 자꾸 에러가 나서 끝까지 완성은 못했음ㅠㅠ 원본사이트랑 팀원들이랑 만든사이트 비교영상 배운점 2가지 1. 네이밍의 중요성 class나 id로 네이밍을 지정해줄때 아무렇게나 짓는 것이 아니라 내용, 그리고 다른 네이밍들과 어떤 연관관계가 있는지, css에서 적용이 필요한 부분이 어디까지인지를 ..

HTML+CSS 2021.03.18

[CSS] position (relative, absolute, fixed) 용어정리

1. relative(부모요소): 기존 엘리먼트의 위치를 기준으로 움직임 기본설정을 이렇게 해놓은 상태에서 css에서 box2에 position:relative; left: 50px; 요걸 추가해서 결과값을 보면 파란색 박스만 왼쪽에서 50px 떨어진 결과를 볼 수 있다. position:relative; 를 설정해주면 left,right,top,bottom 값에 픽셀을 지정해줘서 움직이면 된다. relative는 기존의 box2엘리먼트가 위치해 있던 곳을 기준으로 위치가 변경되는 것이 특징이다. 2. absolute(자식요소) : 브라우저를 기준으로 움직임 absolute는 브라우저를 기준으로 위치가 조정되는데 만약 바로 위의 상태에서 포지션만 relative에서 absolute로 바꾸게 되면 위와 똑..

HTML+CSS 2021.03.18

[HTML/CSS] 사이트 레이아웃 조금씩 제작해보기

2020.03.16 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 셋째날_오후 오후에는 경일게임아카데미 사이트 배너 밑에 있는 내용들을 만들어보기 시작했다. 빨간색 박스가 이번에 만든고 교수님이 작은 상자들일수록 만드는게 복잡하다 하셨는데 진짜 그랬다. 위에 로고~배너까지 만드는데 사용한 코드보다 저 쪼매난 네모들 정보 적고 효과 주는데 더 긴 길이의 코드들이 사용됐음 학교소개 교육과정 취업정보 커뮤니티 상담신청 Game Architecture "게임 기획" "게임기획자를 위한 정석 Class" 바로가기 Game Programming "게임 프로그래밍" "게임 프로그래밍을 위한 정석 Class" 바로가기 Game Artworks "게임 원화" "게임 원화를 위한 정석 Class" 바로가기 Progr..

HTML+CSS 2021.03.17

[HTML/CSS] 경일게임 아카데미 사이트 상단페이지 만들기 반복중

2020.03.16블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 셋째날_오후 오늘 오전수업은 어제 배웠던 것들을 무한 반복해보는 시간이다.교수님이 어제 설명해주셨던 div 개념을 그림판으로 다시 작성해보았다. 맨 처음 wrap이라는 영역으로 한번에 감싸주고 wrap안에서 header와 visual로 나눠줌그리고 header안에서 logo와 gnb로 나눠주면 된다.각각 안의 내용과 효과들은 결과물을 보면서 변경해가면 되는 부분이다. 학교소개 학교소개 커뮤니티 학교소개 학교소개 그리고 지난번에 배우면서 a href 의 개념을 정확히 숙지하지 못해서 찾아보았다. a가 태그이고, href가 속성이란건 대충 링크 연결할때 쓰인다는건 알겠는데 완전히 숙지는 안된 상태..... electronic-moongch..

HTML+CSS 2021.03.16

[HTML/CSS] 사이트 로고 및 메뉴 만들기

경일게임 아카데미 사이트를 보고 따라 만들어보기 시작했다. 이때 중요한 개념 하나를 또 배웠는데 바로 ./ 과 ../ 요 두개다. 옛날에도 컴퓨터 시간에 / 는 파일경로를 표시하는 용도로 사용되는걸 자주 봐왔다. HTML에서도 똑같았다. 그런데 .으로 시작하는게 생소했는데 교수님이 설명해주시길 . -> 자기 자신을 표현하는 형태, 경로설정할때 자주 사용됨 .. -> 현재위치에서 밖으로 나올때 학교소개 교육과정 취업정보 커뮤니티 상담신청 교수님이 실력은 똑같은 코드를 여러번 쳐보고 안보고 칠 수 있을 정도가 되야한다고 하셨다. 그래서 두번째는 홈페이지 봄서 기억에 의존해서 해보깅,,,,그런데 첫번째에는 잘만 뜨던 비주얼1 이미지가 두번재 할때 갑자기 안떴다....무엇이 문제일까,,,,혼자 15분동안 고민하..

HTML+CSS 2021.03.15

[HTML] 기초개념 복습 및 class, id

오늘은 지난번에 이해 기초 개념들을 다시 배워보았다.... 1. HTML은 무조건 '' 요걸로 끝나야함열고 닫는 개념이 굉장히 중요중요!!!! 2.태그 OR 엘리먼트 개념에 대해서도 들었는데...아직 완전히 잘 이해가 가지는 않는다.안에 태그 OR 엘리먼트 말고 다른 내용이 들어간다면 그것은 속성값이란건 확실히 알았음,,,EX) 이 경우에 input은 태그 or 엘리먼트에 속하고, type은 속성값이다. 3. 블록, 인라인 개념블록은 한줄을 다 차지하는거! 블록들도 옆으로 붙고싶어하는 성질은 있지만 이전 블록이 한줄을 다 차지하기 때문에 옆에 붙고싶어도 다음줄에 정보가 입력될 수밖에 없다. 이전에 세로개념으로 인지했었는데 오늘 설명을 다시 들어보니 세로개념과는 다른거같기도하다....

HTML+CSS 2021.03.15

[HTML] 국비지원 개발자 양성과정 첫수업! HTML 기초

블록체인 SW개발자 양성과정 첫째날! #1 VISUAL STUDIO CODE HTML 페이지 제작하는데는 Visual Studio Code 이외에도 다른 것들이 쓰일 수 있다고 함, 수업에서는 요걸 사용비주얼 스튜디오 코드 언어설정 한국어로 바꾸기~~~~(영어울렁증 나에게 필수~~~~)왼쪽 아이콘중에 블록4개로 이뤄져있는 아이콘 클릭하고 'korean' 검색해서 깔아주면 한국어로 설정 변경 가능하다! 1) 새폴더, 새파일 만들기 탐색기 밑에 빈 검은 공간에 오른쪽 마우스버튼 클릭하면 새폴더랑 새파일 만들기 가능!!! 새폴더 먼저 만든 뒤에 파일 만들어야한다! 파일이름은 항상 영어로!!! 영어로 설정해야 오류가 나지 않는다. 2) 파일 형성후 첫째줄에 html:5 입력하면 자동으로 head, body 완성..

HTML+CSS 2021.03.12