본문 바로가기

분류 전체보기539

[CSS] Chapter 09. 레이아웃 만들기 - display_inline 2번째 파랑색 div 블럭과 3번째 초록색 div 블럭을 어떻게 한 라인에 배치를 할 수 있을까? 크게 4가지 방법을 통해 알아보겠다. 1. 많이 사용하지 않은 귀찮은 방법 .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } .. 2022. 12. 29.
쉽지않네 하루에 맨날 3~4시간 밖에 못자서 넘 피곤하다. 하루는 정말 하루종일 잠만 자구 싶다.. 2022. 12. 29.
[CSS] Chapter 08. CSS 레이아웃 부모태그의 css는 자식도 영향을 받는다 - inherit Loerm // 빨간색 글씨로 나온다. 버튼 // 태그마다 상속이 안되는 경우도 있어서, 버튼 태그는 직접 설정해야한다. .parent { width: 200px; height: 200px; border: 1px solid red; } .child { width: 70%; height: 70%; background-color: blue; } // 두 class가 div 태그라고 가정했을 때, child 태그는 parent 태그의 크기 70%에 해당하는 크기를 가진다. px, em, rem 일반적으로 16px = 1em = 1rem이다 .px { font-size: 16px; } .em { font-size: 1em; } .rem { font-si.. 2022. 12. 26.
[HTML] Chapter 07. 레이아웃 나누기 웹 페이지를 만들 때, 중요한 사실은 일단 div 태그로 공간 나누기를 해야한다. 하나의 웹 페이지에서는 다양한 구역이 있고, 기능이 있다. 그것이 디자인의 경계가 되었건 혹은 기능적인 경계가 되었건 html 상에서 구역이 나눠질 필요가 있다면 일단 div 태그로 나누고 봐야한다. 물론 무의미한 div 태그 사용은 권장되는 코딩의 방식은 아니지만, 그럼에도 불구하고 이유가 있다. 유지보수가 편해진다. 고쳐야하는 컨텐츠가 어떤 div 태그에 있는지 파악을 할 수 있다면 나중에 수정이 필요할 때, 금방 찾을 수 있다. 협업이 쉬워진다. 단순 태그보다도 태그로 감싼 태그가 직관성이나 의도를 알기가 쉬울 것이다. 단 div 태그에 class, id를 부여하게 될텐데, 이 네이밍들은 누가보더라도 이해할 수 있게끔.. 2022. 12. 26.
[HTML] Chapter 06. 논 시멘틱 - 공간을 나누는 div, span 태그 시멘틱 마크업을 할 때든, 우리가 주로 많이 쓰는 태그는 와 태그일 것이다. 1. Div : Division / 가상의 경계, 가상의 레이아웃 2. Span 태그는 공통적인 영역에 대해 레이아웃을 나누는 데 있어 css에 중요한 태그이다. 특징은 태그처럼 display: block 이라는 속성을 가지고 있으며 자동으로 줄바꿈이 된다. 줄바꿈, display 영역이 설정되지 않고, 단순히 영역을 감싸주기만 하는 태그가 태그이다. 다시 한 번 복기하지만, non-semantic 태그를 사용하기 전에, "과연 이게 non-semantic 태그 밖에 사용할 수 없는 것일까?" 라고 고민해봐야 한다 2022. 12. 26.
[HTML] Chapter 05. 시멘틱 마크업 HTML5가 등장한지 몇년이 흘렀음에도 불구하고, 아직까지도 태그로만 마크업된 웹사이트를 많이 접하곤 한다. 하지만 이렇게 오로지 태그로만 마크업된 웹페이지는 시각적으로는 아름다울지 몰라도 여러가지 측면에서 문제가 있을 수 있다. 시멘틱 마크업이란? 태그는 보통 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 된다. 그래서 웹사이트에서 다음과 같은 태그가 사용되는 것을 어렵지 않게 접할 수 있다. ... ... ... 사실 HTML5에서 이러한 화면 레이아웃을 위해서 헤더 영역 태그로 마크업된 헤더 영역은 일반적으로 웹사이트의 로고와 소개글 그리고 메인 메뉴가 위치하게 된다. 태그는 최상위 제목을 마크업하기 위해서 쓰이는데, 일반적인 웹페이지에서는 대부분 하.. 2022. 12. 26.
[CSS] Chapter 07. 시멘틱 태그와 스타일링 시멘틱에 관한 설명글 : https://song-ift.tistory.com/8 https://song-ift.tistory.com/50 하나를 에로 들면 : 단순히 글자만 굵게 : 문서에서 중요한 단어 두 태그는 보이기에 렌더링상으로 똑같이 보인다. 시멘틱 태그는 적절한 상황에 의미를 부여해서 쓰는것이지, 단순 웹의 스타일링을 위해 사용하면 안된다. 검색포털에서 html을 읽는데 도움이 될 수 있고, 스크린리더에 탐색할 때 용이하다. 시멘틱 태그는 종류도 많거니와 외울 수 없다 자주 사용하는 시멘틱 태그 : 위 첨자 : 아래 첨자 : 약자 2022. 12. 26.
[CSS] Chapter 06. class와 id 속성 ID 값은 단 하나 1 2 id의 값 같은 경우는 문서에 고유, 유니크하게 단 하나만 존재하는 것이 개발자들끼리의 약속이다. 설령 적용된 id값의 요소가 중복으로 존재하더라도 브라우저상에서는 아무런 에러없이 렌더링 될 것이다. 하지만 개발자들끼리 id값은 고유한 값으로 사용하자는 약속이고, 관습이다. var x = document.getElementById("heading"); // 어짜피 id를 선택하는 것이기 때문에, 단 하나만 선택된다. var xx = document.getElementsByClassName("title"); // class는 여러번 중복되도 되기 때문에, 여러개의 태그가 할당된다. 웹 프로그래밍에서 html, css, javascript까지 세 개는 떼놓지 못할정도로 많은 연관을.. 2022. 12. 23.
[Game Project - 3D Team] Nier Automata (핵 앤 슬래시) [DirectX 3D - Team Project] 니어 오토마타 동영상(Client) : https://www.youtube.com/watch?v=51SftHxQRdQ 동영상(Tool) : https://www.youtube.com/watch?v=SsG11WXrBy0 장르 : 핵 앤 슬래시 날짜 : 2020.01.01 ~ 2020.03.01 인원 : 3명 (담당 파트 : Animation Tool, 플레이어, 몬스터, 카메라, 충돌) 개발 환경 : Visual Studio 2015 (x64) 개발 언어 및 도구 : C++, MFC, DirectX9, HLSL GitHub : https://github.com/developeSHG/GAME-Nier_Automata 디자이너가 만든 메쉬의 로컬 움직임을 그대.. 2022. 12. 21.
[Game Project - 3D Individual] Styx (잠입액션) [DirectX 3D - Individual Project] 스틱스 동영상(Client) : https://www.youtube.com/watch?v=gf9KTKMfrRw 동영상(Tool) : https://www.youtube.com/watch?v=Jzo6Vq71sAQ 장르 : 잠입액션 날짜 : 2019.11.01 ~ 2019.12.01 인원 : 1명 개발 환경 : Visual Studio 2015 (x64) 개발 언어 및 도구 : C++, MFC, DirectX9, HLSL GitHub : https://github.com/developeSHG/GAME-Styx 메인 프레임워크 (DLL로 분리해 엔진과 클라이언트를 세분화) Component, Prototype Pattern을 사용해 독립적, 효율적 .. 2022. 12. 21.

티스토리툴바