[1] html, css
https://github.com/dlgusrb3456/Front_with_go
GitHub - dlgusrb3456/Front_with_go
Contribute to dlgusrb3456/Front_with_go development by creating an account on GitHub.
github.com
html.. 은 간단하게 태그 종류( <a>, <div> ...) 와 태그에 붙일 class, id 의 차이 정도 알게됐다.
css에서는 많은 것을 알게 됐다.
1. box-sizing : boarder의 기준을 어디로 잡을거냐? 에 대한 내용이다. content-box, border-box 두가지 종류가 있는데 content의 경우 내부 요소를 기준으로 width, height를 잡고 border는 padding, margin 포함해서 잡는다. (border-box를 주로 쓴다고 한다.)
2. 가운데 정렬 방법
text-align: center 의 방법과 margin: 0 auto;의 방법을 알았다. text-align같은 경우 img는 가운데 정렬을 해주지 않아 margin을 사용하는 방식을 사용했다.
3. 특정 id, class에 값주기
이건 뭐 간단해서 코멘트 pass
4. object-fit
<div> 내부의 <img> 비율을 결정하기 위한 방법이다. contain, cover, fill 등이 존재한다. 처음 적용이 안돼서 이거 뭐야 싶어서 찾아보니
Object-fit not affecting images
I've been trying to use object-fit on a few images placed inside article elements, but it doesn't seem to affect them at all. The desired value for the object-fit property would be cover, but as of
stackoverflow.com
여기서 하는 말에 의하면 width나 height가 사전에 부모의 값에 연관되게 정의 되어 있어야 적용이 된다길래 width,height에 대해 %로 값을 지정해주고 사용했다. contain이랑 cover 둘중 하나가 비율맞게 증가시키다가 중간에 부모에 걸리면 멈추는건데 기억이 안난다. 아몰랑! fill은 걍 꽊!!!! 채워준다. 비율 개박살!
5. overflow
html의 요소가 css 를 벗어나는 경우이다. 간단하게 overflow: auto 속성을 css에 추가해주어서 overflow가 발생할 경우 자동으로 스크롤이 생기게 해준다.
6. Float
<div> 요소의 가로배치를 위해 사용된다. 과거 유니티에 있던 z축 생각하면 될것 같다. 여기서 문제점은 float로 한놈을 띄우면 그 밑에 있던 놈이 띄워진 놈 밑에 숨어버린다는 문제이다. 이럴때 해결법은 얘도 같이 띄워버리거나 혹은 Float 밑에 가림막을 세우는 CSS를 적용해 넘어오지 못하게 막는 것이다.
div.colors::after{
content:" ";
display: block;
clear: both;
}이 친구는 공식처럼 쓰인다고 한다.
7. flex
Float를 이용한 방식은 view의 크기가 변하는 것에 유연하게 대처하지 못한다는 단점이 존재했다. 이를 해소해주는 방법이 flex이다. 얘는 화면 전체를 기준으로 비율을 맞춰주는 착한 친구이다. display: flex; 속성을 추가해주면 가로로 착착착 정렬된다. justify-content: space-between 속성을 통해 딱 안붙이고 간격 맞춰서 떨굴수도 있다.
8. position
relative, absolute, fixed, sticky에 대해 배웠다.
relative 와 absolute의 차이는
Difference between css position absolute versus relative
I spent sometime understanding the difference between absolute positioning and relative positioning. It was a confusing topic to me and I…
codingbff.medium.com
여기가 2349871293478배 더 설명을 잘해준다 ^^
fixed는 화면에 고정으로 박는거고 sticky는 특정 영역을 넘어가면 고정되는 것이다.
[2] go - slice
https://hobo1229.tistory.com/37
Go Slice 사용법. 그리고 동작 원리까지 뚜까 패기
Go array는 정적 배열이고 동적 배열은 Slice이다. 기본적인 사용법은 간단하다. 선언 및 초기화 방법들 var slice []int //크기가 0이고 요소 타입이 int인 slice 생성 var slice []int = []int{1,2,3} // 크기가 3이
hobo1229.tistory.com
append의 원리를 이해하는게 사실상 slice를 이해하는거다.
append시 len > cap 이면 새로운 array 복사해서 새로운 slice 주는거고 아니면 걍 빈공간에 추가해서 준다. 이것만 알면 slice를 어떻게 사용하던 다 이해할 수 있을 것이다.
북적으로 Go에서 함수에 넘기는 인자는 rvalue이다. call by value라는 뜻이다. slice는 DATA,INT,INT 총 24비트로 구성된 구조체로 웬만한 array를 넘기는 것보다 복사해야할 양이 적다.
그리고 넘겨진 slice에 append할 경우 DATA는 변하지만 len,cap이 변하지 않아(변해도 call by value라 적용안됨) 의미 없다. 포인터타입으로 넘기거나 아니면 slice를 return 받아서 사용해라
'IT 일기 > WILT?' 카테고리의 다른 글
| #3 WILT 배열 돌리기 & 괄호추가하기 (0) | 2023.04.06 |
|---|